I've looked at many "mysterious white-space at bottom of page" issues here on SO, and played with the viewporttag many times, but I still cannot figure out what I'm doing wrong!
The page in question is: http://www.seniorchoicesunl.com/error_documents/error401.php
Here's what it looks like on mobile from Chrome Dev Tools:
Any Ideas on what I'm doing wrong?
Edit:
setting ANY initial-scale is bad news! It makes the font too tiny!
Take a look:
The desired mobile look, while keeping the desktop and tablets as-is, is this:
P.S. Fixing this issue could reciprocally fix other related issues I'm having with other webpages.
Add this on top of your css file :)
html,body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
it fixed the bug for me.
What's going on here:
You've set width=device-width, this makes the layout size on your page equal to the device's screen width. i.e. making an element 100% will give it the same width as the screen.
Chrome infers the layout height using the width and screen's aspect ratio. i.e. height=width/aspectRatio
The sub_container_div element actually ends up being much wider than the layout width of the page. In my case on a Nexus 6, the device-width is 412px while the sub_container_div is 594px wide.
Since the content is wider than device-width, Chrome allows zooming out and loads the page at the minimum zoom level but this doesn't change the layout width/height so height 100% only fills device-width/aspect ratio pixels, which doesn't fill the zoomed out viewport.
The correct way to fix this is to make sure all your content is contained by the layout size. In your case, the reason the sub_container_div is wider than the layout size is that your padding/margins cause it to expand outside the parent. The solution is to add box-sizing: border-box to the sub_container_div and dialog elements and width: 100% to sub_container_div. That way, Chrome can't zoom out and you can't see outside the layout box (in HTML spec language, that's the initial containing block).
I had the same issue on Chrome 77
I fixed the problem by removing height: 100vh on the body tag.
This seems to fix the problem:
Change <meta name="viewport" content="width=device-width"> to <meta name="viewport" content="width=device-width,initial-scale=1.0">.
Override width: 25em; on .sub_container_div in your mobile CSS so that the container scales with the width of the view.
If you do not want the font to scale, it seems just adding initial-scale=0 will work as well. However, this will make the text very hard to read. You can play around with different scales, but it seems just setting it will fix your issue.
In my case one element was too long for a mobile screen and it broke the webflow. After I shortened the width of the long element, the extra white screen was also removed from the footer.
Related
Third time round redoing this because im not really fully able to understand my problem this time round im going to be a bit more detailed.
My problem starts here:
Problem
as I think it shows, you can see the width of the picture is 1920:720p, This is too large on the viewport and I need to scroll left and right to be able to see the rest of the image on the page.
I have tried pretty much everything I've seen in the comments so far, perhaps I tried incorrectly but nothing seemed to fix it, keep in mind my display is 19:10 and is the display used with the m1 macbook. Im not sure the exact resolution or if it matters but I can't for the life of me seem to make this image fit my page, I've tried using:
.(the picture) { width: 100% height: 100% }
And:
.(the picture) { width: 100vw; hight: 100vh; }
And:
.(the picture) { width: 100vmin; height: 100vmax width: 100vmax; height: 100vmin }
And pretty much every combination of those things you could think of and it stays the same resolution and does not ever fit the view port.
Another problem i'm facing is that when I make the window smaller it cuts all the elements that don't fit inside the smaller window.
Thats all I got for now, ill probably add more if I need to later.
Edit1: Keep in mind I did not use vhvw % and vminvmax with only the picture, I tried them with the body element and some other things too.
This is called "Responsiveness".
The tag
Start by adding this meta tag to your head tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
vw and vh
as mentioned by #cloned,
use widht:100% and height:100% to set the size relative to the parent.
and use width:100vw and height:100vh.
vw is view-port, the size relative to the screen. 100vw means 100% of the size of the screen. So if the screen is 1920p in width, the element itself will appear 1920p. If you set it to 10vw, the element itself has a width of 192 pixels.
On a window with 30px width, 10vw is 3px.
Same is for vh but it's for the height.
These guys, vh and vw work completely individually and may create problems on windows with an aspect ratio other than 16:9.
For this we might wanna use v-min or v-max
You can read more on this here:
https://www.w3schools.com/cssref/css_units.asp
https://www.google.com/search?q=how+to+make+responsive+website+using+css
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
Extra information
I also use position:fixed when assigned tasks to make the website responsive like this:
.class {
position:fixed;
left:0px;
right:0px;
width:100vw;
height:100vh
}
this makes the entire element cover the page and have it completely centred. You can try zooming out, scrolling (although the scrollbar doesn't appear unless there's more) or resizing it to a completely different dimension. It will look as if it's covering the entire page perfectly.
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
Demo
I want to make responsiveness behaviour like at this site.
There is meta viewport content set to width=device-width, initial-scale=1, maximum-scale=1, but if i resize browser vieport size by reducing its width (about 200px width and smaller), content scales proportionally and responsiveness "swithes off".
You can compare this site and jsFiddle demo with picture below. The same text with the same font-size, but scales differently.
UPD
I need to know how can i set 20px font size and it will scale proportionally like without using meta viewport. Try to make a <h1> with meta viewport and without one, you will understand what i mean
Your question is unclear, but assuming you're talking about the fact that on your demo, the content is blocking its resize after a certain minimum width:
It is important to understand the function of the meta viewport.
The viewport is the user's visible area of a web page.
The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
-Source
This function prevents a user to zoom in or out on your website. The code you give us says that the width of your webpage must be the width of the parent viewport (equal to your browser's viewable area), that the initial zoom has to be 1 (that means no initial zoom is set) and that the maximum scale can be 1 (that means no zooming in allowed).
The fact that your website is responsive until a certain minimum width hasn't any direct link to the meta viewport.
The responsiveness of a website is based on what's called breakpoints in CSS. This gives certain CSS rules based on the viewport properties (in responsive cases: if the screen's width is between a certain minimum amount of px and a maximum amount). According to what I can understand, you actually need to set the CSS min-width attribute to your website's body like this:
body {
min-width: 300px; /*You'll have to set the value you wish here*/
}
The next thing you have to do is choose how you will handle screens smaller than 300px. There are two options after this:
You can choose to force-give your webpage the device's width and prevent horizontal scrolling but this will hide all the overflow. I personally suggest not to use this technique. For doing this, you'll need to hide all html's overflow with this CSS: html {max-width: 100vw; overflow-X: hidden;}.
The other (better) option is to give your webpage the minimum required width. This will allow horizontal scrolling and a better user experience. To do so, use this CSS code: html {min-width: 300px; overflow-X: visible;} (remember to replace 300px with your desired minimum width).
This should be all for now. Remember that there are hundreds of guides for responsive web design available. Hope your issue is solved.
The solution was simple. I needed just set body min-width
I am quite some way through a pretty much CSS only solution to make a mobile site for our e-commerce site. It's actually going quite well, apart from the fact that the x-axis consistently has a margin that shouldn't be there - I have put it in the CSS that width is 100% for most properties.
The only thing that has worked in visual practice (it made the y-scrolling really stuttery) was the addition of:
html
{
overflow-x:hidden;
}
So although it looked great and was exactly what I wanted I couldn't get the scrolling to be fixed, which is pointless for a mobile site.
On top of that I also added this to the page to detect screensize:
<meta name="viewport" content="width=device-width,initial-scale=1" />
I think that somewhere the media query is causing havoc:
#media screen and (max-width: 480px) {
Because it is the only place that specifies the 480px aspect of anything, and that's exactly where the margins continue to. So is it something I'm doing wrong here?
In hindsight I'm not entirely sure where I got the 480px from - think it was a copy and paste job!
Other things I have tried were removing the absolute positioning from a lot of elements, making sure everything has width of auto and displaying in a block.
I'm out of ideas and just want everything to be like the overflow-x solution!
Thanks in advance.
As a rule, you shouldn't have to specify width: 100% on anything.
Chances are you have some padding or something on one of those elements causing it to be > 100%. All display: block elements will fill the width by default, you don't need to specify that.
It's not always the padding either, margin-right has caught me out enough times because you can't actually see it but it's there, pushing out the content
My guess is that a padding causes your element to be larger than 100%. If you want to avoid this, you can try applying box-sizing : border-box; to the affected element. Width and height will then include padding so you will actually get 100% ( or X pixels ) of width regardless of the padding and size of border you set.
Here is the site in question: www.prestigedesigns.com
The problem is that my header and footer won't stretch to their assigned 100% but only on iPhone/iPad.
I've tried what I think is everything and I could really use some help? Is there anyone else that has a similar issue?
Thanks.
It's kind of a viewport issue with mobile Safari, but you can get the same effect by shrinking the width of your desktop browser window and scrolling right, you'll see your background starts dropping out.
This is because when you're setting width:100% to your #top and #header divs, you're telling them to resize to the width of the containing element, which in this case is the browser window, (or viewport). You're not telling them to resize to the content within.
Mobile Safari's default viewport width is 980px, so it uses 980px as the width of the containing element for your divs. This is why your layout, which is around 1050px, is getting its background chopped off.
You can fix this for mobile Safari by directly setting its viewport (read Apple's Docs), or by adding min-width:width of your design in pixels; to your body. Mobile Safari will use the min-width's value for setting its viewport, and it'll also keep it from happening in desktop browsers as well.
Set the viewport to adapt your page on any device.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Set min-width:(Width of your design)px; in CSS file and this issue will be solved.
it's not assigned width: 100% the header is getting width: 1009px; same thing with the footer.
Just a hunch as I can't actually test it, but the foot element you have within footbar is set to an absolute width in pixels while the footbar is set to % - the same with your header element - try switching these to % too?