I have faced a weired behavior and I can not find what is the reason of this behavior. My websites have two different rendering when I resize the Google Chrome manually and when I check the website in the Device simulator (using developer tools).
Brief:
<html>
<body>
<div>
//Entire the codes here with no overflowed element
</div>
</body>
</html>
I have no styling on the width of HTML and BODY tags. The direct child of body is a DIV again with no styling on width (So it should cover 100%). When I resize the window manully the DIV covers 100% of the width of viewport but when I resize the window in device simulator (developer tools), the child DIV is being shrinked faster than the viewport and whitespace appears in right of window.
In a real mobile device, When I check the website, the top menu Icon goes out of the width of screen and I can see the half of this icon so it seems that the rendering in the device simulator is the real logic which happens is a real device. If you zoom out then webpage in a real device, the Menu icon comes back to the screen however I have set the following and I expect that the page open in full width by default But it seems zoomed-In that I can oom out after page load):
<meta name="viewport" content="width=device-width, initial-scale=1.0">
More checks:
There is no calculated padding and margin in body and html when I inspect elements.
I have removed AOS library from the webpage to make sure that the thirdparty library is not making margin and padding but no change.
I have tested overflow-x:0 for body to make sure there is no overflow element but no change.
You have a div which its position is out of the width (viewport) of the website:
<div style="position:absolute;left:calc(10% + 350px);top:120px;color:#f57f20;font-size:20pt;">
<font style="vertical-align: inherit;">
<font style="vertical-align: inherit;">
with Plan
</font>
</font>
</div>
Notice the calc(10% + 350px).
By the way, if you want to cut the overleft out, you can style the html tag (not, the body tag) like this:
html {
overflow-x: hidden;
}
Related
Suppose I have the following markup:
<!DOCTYPE html>
<html style="background: yellow; padding: 0; margin: 0; width: 1100px;">
<head>
<!--
<meta name="viewport" content="width=2200, initial-scale=1">
-->
</head>
<body>
<div class="container" style="width: 400px; background: red;">
<div style="background: green; width: 300px; height: 200px;">
Here goes my text Here goes my text Here goes my text Here goes my text Here goes my text Here goes my text Here goes my text Here goes my text Here goes my text Here goes my text Here goes my text Here goes my text Here goes my text Here goes
</div>
</div>
</body>
</html>
I have set fixed width 1100px to html element. Now when I open this document in google chrome responsive device toolbar and try to decrease the width of the screen then after I go down below 1100px then the whole website starts to squeeze. If I do this
<meta name="viewport" content="width=2200, initial-scale=1">
Then the website starts squuezing at below 2200px, irrespective of the width of html and other elements. Does the width=2200 of viewport tag forces the browser to think that html tag has width 2200px so it should start squeezing at below 2200px?
Seems like this time my understanding is correct.
Every browser renders every webpage on it's viewport. On desktop screens the viewport is same as the browser window. But on mobile viewport is different in width and height from browser's width and height respectively. To elaborate why it is so consider the first case:
html document width is 800 css pixels: Suppose we want to open this webpage on iPhone5. iPhone 5 has width 320 css pixels. Now to show the 800px wide webpage what it does is, it first hypothetically acts like a desktop screen 980 css px wide. It renders the 800px wide page on this imaginary screen. Let us call this imaginary screen the viewport. Now iPhone 5 shrinks this imaginary screen by a factor of 320/980, i.e. a div of width 490 css pixels will act like a div of 490 * (320/980) = 160px -- half of iPhone's screen. Not only div's the text's font size too will be decreased by the same factor. Now let's move onto next case.
html document width is 1170 css pixels: Suppose again we want to open this webpage on iPhone5. This time iPhone cannot render the webpage on 980 css px wide viewport. In general whwnever the webpage is larger than 980 css px, the iPhone will render the page on an imaginary screen of the same width as that of the webpage. So this time the iPhone creates it's viewport 1170 css px wide. After that it shrinks the viewport by 320/1170 and renders this page on it's screen. Everything including font sizes is reduced by the same factor.
Now let's get back to the specific question asked in the question.
Does the width=2200 of viewport tag forces the browser to think that html tag has width 2200px so it should start squeezing at below 2200px?
No, it forces the mobile(tablet) browser to think that viewport's min-width is 2200 css px wide. Now when I make google chrome responsive tool bar wider than 2200px, say 2400px then the viewport also becomes 2400px wide, it doesn't shrink the webpage when responsive toolbar is wider than 2200px. When the toolbar goes below 2200 it immedeately starts squeezing the vieport because the mnimum width of the viewport is 2200px.
Surprisingly, what viewport tag actually acheives is that it enables the media queries on the webpage. If I had use the following media query with the media query along withe the viewport tag:
#media (max-width: 800px) {
* {
width: 200px !important;
}
}
then the wepage won't squeeze on screen sizes less than 800px. Note that the media query without the viewport tag does nothing below 800px. So what browsers usually do is that if they see the webpage having larger width than the viewport width then they squeeze the webpage -- which is good. The viewport tag is not supposed to stop this inner ability of browsers -- but somehow stops the browser to squeeze at below 980px and make it squeeze only when viewport width gets smaller than webpage width.. It allows us to use media queries, through which we could imploy different width to different elements. It also provides other functionalities like disallowing user to zoom--in/out by user-scalabilty, changing apperant viewport size etc.
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.
So this is a really strange one. My website is smaller than my viewport. I'm inspecting the dom by plugging my iPad into my mac, and inspecting with safari developer tools. If I hover over the html, or body element, the elements are not filling the width of the viewport. This is a problem for me as my full width image is not full width! There is a gap of about 10% to the right of the html element.
See attached screenshot of the html element being highlighted.
I found the answer to this thanks to this post.
Add to the meta viewport tag shrink-to-fit=no
I'm having an extremely weird resolution problem and am hoping the tags are at least partially appropriate.
Here's what happens:
I have an image with size 1920x1080, my screen resolution is also 1920x1080 as indicated by the OS (Windows 8.1). Viewing the image in Windows Photo Viewer and clicking the button to make it "Actual size" makes it fill the entire screen from left to right, while being scrollable vertically, as expected.
I now use this image in a website/html file. I've tried both <img> and CSS background-image, resizing the element or the containing box to 1920x1080, no matter what I try, the image is too large and I see only about 2/3 of it horizontally. What's more, I've added a border to an absolutely positioned empty div and given that div width: 1247px; via CSS. The border goes nearly across the entire screen, leaving about 30 pixels on both sides combined, which leads me to the conclusion that for whatever reason, my browsers (tested in most recent versions of Firefox and Chrome) change their contents' resolution to 1280xsomething. Which I find very strange, especially since I'm using both of them in classical desktop mode and can freely display other windows on top of them without any graphical effects that usually happen when an application display its contents in a different resolution.
So, my questions are:
Is this a known issue or am I doing something wrong?
How can I fix this and make my browsers use my screen's resolution?
Here's a simple setup that reproduces the issue in question. Save as anyfilename.html, set screen resolution to 1920x1080 in system settings, open the file in a browser:
<html>
<head>
<style type="text/css">
body {
background-image: url(http://www.hd-wallpapers.com/download/black-glass_1920x1080_225-hd.jpg);
}
div {
border: 2px solid red;
width: 1247px;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
I was testing a website: This Website
When I stumbled upon the following problem. everything looks correct in all browsers I tesded on my computer (IE, Chrome, Safari, Firefox etc...) but When I test this website on iPad, in safari browser I get strange margin at the right side, I can't show a screenshot, but in a nutshell image all website page like you see it on computer, but shifted to the left side (so there is blank space on the right side). Can anyone suggest what is causing this?
EDIT:
I noticed that this margin is somehow affected by margin of arrows that you can see on the sides (used to list through slides). Styles of the buttons have following id's
#prevslide and #nextslide
EDIT2:
As code is very long, I will post links to stylesheets used in website here.
Slideshow stylesheets, #prevslide, #nextslide style rules can be found in second stylesheet
Style1
Style2
And main stylesheet I use to style how website looks, however I dont think that the problem lies within it.
Main Style
It looks like your problem is because of the combination of % and pixels in your css.
For example, your .header wrapper is set to 100%, but the .in-header inside it is set to 1020px. This is fine as long as your browser window is wider than 1020px, but when it shrinks, .header is sizing itself in relation to the browser window, and .in-header isn't.
Set the min-width property on your body element so it won't ever reduce below the size of your main page elements:
body {
min-width: 1020px;
}
You'll need to set a meta tag in the header for the ipad (and mobile):
<meta name="viewport" content="width=device-width" />
This instructs the browser to set the page body to match the tablet size. I'm not 100% sure this is the exact setting you want, but I don't have my iPad handy to test; whatever the solution, it lies in this tag.