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.
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.
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.
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">
'Sup Stack!
So I've been getting to grips with the viewport meta tag and how it adjusts pages to fit to the devices viewport. I've had some help from stackoverflow earlier here:
Footer will not extend to 100% width on iphone, why?
mainly my concern was that my footer for my website wouldn't extend to 100% width. You can visit the website here:
http://gloryillustration.com/
And you can see my iphone solution here:
http://gloryillustration.com/tests/test13.html
where i managed to sort the webpage to display properly on iphone, by using:
<meta name="viewport" content="width=device-width, initial-scale=0">
And if you were to view this on the ipad the footer is displaying 100% width, but the entire page is now displaying as though its zoomed waaaaay out and its adding tons of white space to the right left of the page and under the footer as well. I take it that the website is adjusting itself as though it is being viewed on an iphone. But im not sure why it's adjusting like that? I would think that the content="device-width" would set the width to that of the device its being viewed on? Or have i misunderstood this completely.
Is there a way to set a viewport meta tag to encompass both ipads and iphones for this website?
Any help much appreciated!
Use this instead:
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
You can see the result in play here http://www.premiumdw.com/case-studies/convert-a-960-grid-website-to-a-responsive-design/.
try initial-scale=1 instead of 0
for you wanna have it a 100% zoom, not 0%
I'm trying the code below; but it wont work. My content's width renders about just right in my Android Incredible, and I think it renders across pretty well in iPhone (Think, I am using online emulators for iPhone view, but should be)
<meta name="viewport" content="width=320, initial-scale=1">
But the grey #999 background is still causing a horizontal scroll - and seems to not be adapting like everything else. How can I close that extra space in background created by the body { ??
It looks like the content in your page is causing the horizontal scroll. Once you get the page too narrow, the youtube video and images cause the scroll.