The site which can be viewed here contains all div elements inside a wrapper div with the following propreties:
#content_wrapper{
min-height: 100%;
position: relative;
min-width: 1280px;
}
The inner content (for example DESPRE NOI section) has a static width of 960px (#despre_noi has class .latime_960)
.latime_960 {
width: 960px;
}
Even though the main wrapper has min-width:1280px and the inner content has a static, 960px width, the site fits perfectly on mobile. I tested it on a Samsung S3 and on a very old LG, in both portrait and landscape modes.
It fits perfectly. Why? Is it just by accident or I can keep this design and it will fit fine on all mobile devices?
The website does not use the Viewport Meta Tag and therefor the mobile browser is scaling the content to fit the screen.
Edit: I recommend using the Viewport Meta Tag and placing your mobile layout styles at the top of your CSS declarations followed by media queries for the CSS needed for your large screens/devices. Browser scaling may look fine at first but it is very likely you will experience font legibility or touch target interface issues when you rely on the browser scaling.
Your website doesn't load for some reason. Are you using 000webhost?
& to what you asked in the Q... its most likely because of position: relative;
edit: " .... programmed to view thew website as a whole if it is not programmed by the developed to be mobile friendly. If you add a media query to make it so that a size of a div changes based on a height and width of the screen, then you will see the change ..."
Related
I've been searching in other questions since this is a pretty common problem but none of them applied to my case.
I'm developing a small web app with React, just to get the basics, and the background img works fine in mobile view (there's a media query that changes it at 480px to a portrait one) it resizes from 480px to 320 and looks good.
The problem is that, at certain heights if you stretch or wide the window the background gets stucked in the middle of it (if you recharge the page it appears as it should, being the window in the same exact place as where the problem occurs).
The img is loaded through CSS in the html, If I remove the background-size property it works as expected in desktop and mobile, but when I cross the 1260px width it doesnt cover the full width.
I have this codesandbox with all my code: https://codesandbox.io/s/stoic-brahmagupta-ro2kb?file=/src/style.css
And I attach an image of the problem. Thanks in advance.
As u r testing this you can see the content of the App is overflowing the html element
I rather use min-height on global elements like body or html than static height to prevent such as cases.
So to fix it you just simply add
html {
height: auto;
min-height: 100vh;
To prevent not overflowing instead of scaling we just add min-height equaly of 100vh (viewport height).
I think it will propably do the job without height: auto; but i like add it to prevent even more edge casing
So I built this Wordpress page using WPBakery page builder and added a Pardot form to it. On certain browser sizes the form - which looks like it is an iframe element - is larger than the container it's in, so it adds scrollbars to compensate. Is there a recommended solution to keep this from happening? See attached image:
Picture of Pardot form forcing scrollbars
If you're not entirely sure if the form is an iframe element, you could try targeting the form's fields using CSS and using dynamic width and height values such as width: 100%; instead of something like width: 250px;, which will automatically resize your elements to fit the available width. This will take care of the horizontal scrollbar.
For the vertical scrollbar, you could try targeting the scrollbar with psuedo properties to manipulate it's style or hide it altogether. You can read more about it here:
https://css-tricks.com/almanac/properties/s/scrollbar/
It's worth noting though, that this approach isn't highly recommended, due to it's limited support across different browsers and platforms.
However, in the case of this specific vertical scrollbar, it appears to be a height or padding issue on the form's container, so you could target that with #media queries to make it more responsive across devices.
I hope this helps!
The best you can do, is in Pardot, create custom CSS - in Pardot - to accommodate smaller screen sizes.
The biggest issue with this is that the screen size is iframe dependent and not actual browser window width that it's embedded in.
So if you put the iframe into a container that is 600px wide on desktop, that would be a media query of #media (min-width: 600px) in Pardot. You need to adjust the media query for the container size.
If you don't have access to Pardot's CSS tools, you're mostly out of luck.
I have an iframe that is responsive, but sized differently on smaller (mobile) screens. On larger screens it's the common responsive iframe where it scales proportionally to fit within the container using the padding-top %. And on smaller screens the container becomes 80vh height, 100% width. The iframe content then has it's own horizontal slider (which will also eventually be gryo controlled).
It all works fine on desktop browser, and other devices (bunch of Androids) but not on iOS. The iframe still fills the height correctly but doesn't max out at the container width. Instead it keeps original proportions and becomes wider than its container.
Not the easiest to explain in words, so:
Screenshot on Android device
Screenshot on iPhone
Live demo
View it on desktop and resize the window it actually does exactly what I need, including once you get down to smaller mobile size. Or load it on an Android device (I'm using BrowserStack). You'll notice the iframe width stops at the container bounds, and you get the scroller within the iframe.
But on iOS (iPhone) it's not doing that. Instead the iframe just extends out beyond the container bounds, and the parent page becomes horizontal scroll.
Any help appreciated.
UPDATE:
Found a semi-related post that suggests adding the following CSS for the iframe element
width: 1px; min-width: 100%; *width: 100%;
It didn't do the trick for me, however when I add that to the body element of the iframed content (which I also control), it resolves the issue.
I have a problem when loading the mockup of my project on an iPhone.
The problem is that on my mobile device, most 100% containers seem to have some kind of a right margin or padding, which leads to content crash.
I really think that probably this is due to "viewport" stuff, which I don't know for now, but anyway, take a look.
when seen your screenshot, Your code is up to date, when I put my image in your code then it's working fine, so you can check your image width and check css
check with this #0a1a19 url("../img/img2.png") no-repeat scroll center center / 100% 100%;
If you want to make responsive then use bootstrap and you can get from here....Bootstrap
But you are used custom css so you need to use media query for different layouts like, tablet, mobile, etc...
and one more thing if you not getting perfect layout in your mobile view then must check your media query for mobile view.
Note: always use % (not px) to give the width of any image.
.header__inner has fixed width, change width to 100% and remove padding for mobile devices:
#media <params go here> {
.header__inner, .header__inner_mod {
width: 100%;
padding: 0;
}
}
Codepen
I am building a website for our studio and i came to a problem. That when i view the website on the mobile device i get a very strange gap on the right.
The website is here: www.rawstudio.ee
And print screen. - http://rawstudio.ee/img/ptscren.PNG
Second issue that i have is that when people who have wide but not high screens with aspect ratio for example 21:9 come on the website the logo goes very down and is not on the centre of there screen. The logo does not move in relation with the aspect ratio and is displayed to low. How can i fix it?
This is due to your media queries not catching the logo when it reaches a certain size.
You just need to make a slight amendment in the css for the logo once the page reaches 370px or less and also to its container.
#logo {
width: 100%;
}
#media (max-width:370px) {
#logo img {
max-width: 100%;
}
}
the strange gap is caused by the logo image, it's too large.
I suggest responsively resizing it with #media.
You can debug for mobile devices using google chrome's Device Mode
Image
As for the second part of your question, if you increase the margin-top to 50% of the #logo img tag, again with (multiple stacked) media queries, you'd probably get the result you want, but I don't think it's the correct way to do it.