My website has white empty space on the right side, on a iphone for landscape (on Chrome). I tried adding this in the head section(but its not helping):
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
wrapper has 100% width
for portrain it's ok, but foe landscape appear white space
attach sreenshots
It's very possible that you have an overflowing element on the right side. Maybe a fly-out navigation, or maybe just an errant element. If you can SCROLL horizontally to it, there's a great chance that this is your issue.
If you are having trouble finding it, try Firefox's 3d view. I use that junk all of the time to find those sneaky overflowing elements.
Related
So my website has all of what everyone says to add when it comes to the head area:
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
However it doesn't work.
Instead, I'm getting this zoomed-in website that has the scroll bar on the right side(supposed to) AND one on the bottom (it isn't supposed to have a scroll bar on the bottom.)
Some perhaps useful info:
width:1920px
height: 3742px
IMAGE LINK:
https://ibb.co/W53qHnq
Code:
https://docs.google.com/document/d/1FpUiJsbVPp5Q33sa91lMJ9QYMU1cf8jHwkmlnzP33Y8/edit?usp=sharing
IMHO, the problem is your background image is too big, exceeding the viewport. You need to style the image to fit in the viewport. Exact code depends on your current image code, please provide.
Also, set overflow: hidden on the wrapper/container of the image to hide both scrollbars or overflow-x: hidden to hide just the horizontal scrollbar.
The site I created makes an unnecessary large width on the page. The page is supposed to fit to the screen of a mobile phone. But I seem to have to scroll to the right for nothing. This is the site: https://gwenlotest.000webhostapp.com/index.html
it works perfectly on big screens but as soon as I open the site on mobile websites I have to scroll to get to the burger menu and I don't understand why.
It is caused because of the elements that animate from the right. Look into putting them in another div that wraps these elements. The div will should have 100% width.
As you might notice, as you scroll down, when the elements animate from the right edge of the screen, the right extension disappears.
Add shrink-to-fit=no to your meta name="viewport" so it should be in the form
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
i think that should fix the issue.
So I'm having an issue where my site has a lot of padding on the right side, making the layout load incorrectly. It appears correctly in on my desktop when the window is resized, but everything other than the header breaks when viewed on my phone. All of the relevant divs are set to a width of 480px, and I have the following tag in my header for the media query:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here are screenshots of how it appears on desktop and mobile, as well as a link to my mobile css page (the menu is open on mobile, but the extra space seems to affect it as well).
CSS Page
Edit: I'm now having a slightly different issue, where the margin has been added to the entire right side of the screen. I changed the pixel widths for many of the divs to 100%, as well as adding the <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> tag to the header. While they can no longer zoom out, you can just scroll the screen horizontally to find the padding. I'm also having an issue with my font-face tag, which no longer loads the header fonts. I updated the css file, so hopefully that shows why it won't work anymore.
Also, here's a link to the live site: Link
You shouldn't be setting explicit widths here, (at least not in pixels anyway) and from a brief glance at what you've posted I'd imagine that's where your issue lies.
Firstly, take off the widths that you've set for anything that you intend on being "full width" - remember divs are block-level elements anyway, so if you don't set a width at all, they'll have a width of 100%.
Secondly, take off any other pixel widths you're setting and change them to be percentages instead.
Thirdly, you'll save yourself a lot of headaches if you set 'box-sizing' to 'border-box' (I'd recommend just doing it on '*' for simplicity). This will prevent your padding and margin from being added on top of any widths you set as percentages; they'll be included in the box sizing instead.
Finally, I can't stress enough how important it is to get out of the mindset of things like "mobile" and "desktop". All we're talking about here is different viewport sizes. :)
If you have a live link you can share I'd be more than happy to have a proper look at this.
Add the following to your .css file:
img{max-width:100% !important}
I am building a responsive website. However, when I view it in a mobile mode, the content I have is just 50% of the screen and the rest is white space. May I know why?
Also, how can I make my background image of my home screen responsive? Sometimes it is responsive and sometimes its not.I don't know where I am going wrong.
Many Thanks in advance.
Check all the way through the white space for any div elements sticking out. There will be a div that extends the whole way across the page. Once that is altered to be the same width as the other content it will fit to the screen width.
You are probably missing the <meta name="viewport"> tag.
Read more about it here:
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
Try inserting this one first in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
GOAL:
a div is
{ position:fixed; bottom:0% }
it has a real height and width; the z-index is the highest in the document
= therefore it should be visible everytime!
PROBLEM:
mobile browsers 'cut' the bottom end of the page when zooming out.
but this also cuts my div! While zooming in or out, I can see how the bottom-border makes the div appear/disappear.
MY INTERPRETATION:
it looks to me like the body of the page has an overflow:hide and my fixed div is pushed outside the area of the body when zooming out.
unfortunately, I can't change the body(I only inject the div into an existing site and have no connection with the code of this page)
Would be happy with any explanations/&suggestions/&ideas!
thanks.
EDIT
I checked the height of the viewport, the html-document and the finally visible amount of css-pixel when zoomed out to maximum:
1440 document.documentElement.clientHeight
1486 document.documentElement.offsetHeight
1566 window.innerHeight
so,the mobile devices seem to 'cut' the fixed-div, because it's OUTSIDE THE HTML !?!
EDIT 2
I deactivated the existing <meta name="viewport" content="width=device-width, initial-scale=1"> (not a real option for later) and saw, that now also my dev-tools in chrome show the 'end' of the hmtl/body. Everything what is more south is not visible; instead of I get a very empty whitespace.
Try adding this line as the first line after head starts
<meta name="viewport" content="width=device-width, initial-scale=1.0">