I have added the meta viewport in the header
<meta name="viewport" content="width=device-width, initial-scale=1">
as well as #media tags in css but on mobile, I am still able to scroll horizontally.
This is what I wanted, webpage not able to side scroll on mobile but this is what I currently have.
Edit
This is what happened when the webpage is zoomed out. Maybe this will help to make the situation clearer.
Related
I'm using bootstrap media but I'm using it only for my navigation, the other code is just ruining my current. When I visit the website from mobile it's zoomed in. I added the media meta <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">, and the website is not zoomed but I can't scroll at all. I viewed every answer here and nothing helped.
If anyone helps I will be very thankful, have a great day!
The maximum-scale. perverted from zooming. So, read this to know how to deal with it:https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
https://github.com/twbs/bootstrap/issues/12738
My website is responsive but on mobile it allows me to pull it slightly to the left, ive tried all the view point metas i could find online and nothings working. On inspection there is nothing overlapping the screen so i cant see why it is showing this whitespace.
Here is the page in inspector view with the html tag selected
Im currently using
<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />
Morning All,
I'm hoping someone can advise me on the amendments I need to make to my website's CSS to make it display correctly on a mobile device.
At the moment when you view the website in mobile device the menu navigation is displaying at the same size as if it was on a desktop PC, but the rest of the website looks absolutely fine.
From which I can see the navigation uses % once it hits a specific width.
So how can I correct this issue?
I look forward to hearing your fixes.
Please see the website below:
http://www.blanchel.com/
try this:
<meta name="viewport" content="width=device-width, minimum-scale=1.0" />
if you don't want to allow zooming, add max-scale at the end:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
When I view my website on a mobile screen of iphone there is a white space on the right side of the screen and I can't figure out what is causing it. It seems to be only in the header section too.
Any suggestions?
Thanks.
URL
I see your site and i think that your site is work fine in browser but it create a problem with mobile your site is fully responsive and there not any white space in desktop resize but your media query not work in mobile so put this meta tag in your head tag and check again in mobile
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
try to add
margin:o;
if you post your code, i can provide you the accurate answer and one more thing not every one have IPhone lol :)
I have the following viewport
<meta name="viewport" content="initial-scale=1,user-scalable=1">
On android, the page loads as if it were in a desktop - the whole page is viewable and zoom-out to fit the screen
on ios - the page loads without zoom-out, and what is viewable is the upper left corner of the page.
I've tried using width=device-width and width=1350 but nothing seems to work
What do I need to do to make the page load so it would fit the screen fully no matter the screen size?
Why don't you use this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I think it's most recommended meta tag.