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
Related
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.
I just started learning html/css/javascript and decided to throw together a website for practice. I now know that a lot of the approaches I took in creating this website are seen as bad practice, which is why I will not continue to do them. What i'm having issues with is getting the mobile layout I see on Firefox's mobile emulator to appear as is on an actual mobile device. Any advice on how to fix this issue?
Thanks in advance!
Website Files
Most modern browsers have some basal CSS-styling already: if you type in a <h1>sentence</h1> like this without the basic HTML elements, Chrome will still deliver the webpage.
I built a basic web-design framework like Bootstrap, and these three lines are critical in making a responsive webpage. Make sure to add them at the top of the <head></head>.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Language" content="en">
<meta name="viewport" content="width=device-width">
The dropbox files wouldn't open, so I haven't seen your work. Try adding these and see if it works.
Try adding this meta tag to your pages, in the <head> element:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
I had this issue with Bootstrap awhile ago and then found this nifty answer online. I also would recommend using something like Bootstrap or Materialize.
I have just launched my website http://www.connorgraham.com.au and am having responsive issues, specifically with mobile. Prior to launch, everything was working and looking perfect, however I have just realised that on mobile 20% of the right side of the screen is just white. The website should be full width and there shouldn't be this blank space showing.
I would appreciate any help, and am happy to provide any of my code if it would help solve the issue.
I have explained the responsive grid system Via bootstrap you can check
https://attariwebsol.wordpress.com/2015/04/24/bootstrap-grid-system/
and tell if this is not helpful to you I will explained according to your layout.
In your '<head>'
change <meta name="viewport" content="width=device-width"> to <meta name="viewport" content="width=device-width, initial-scale=1"> this should fix your issue.
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
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" />
In a responsive layout how does the phone determine how far it zooms in when it lands on the site?
Here is an example:
http://eldoradodrillingcompany.com
If you look at it in your browser it looks great, but when you actually land on it on your phone it's like the zoom is too far in. Any thoughts would be greatly appreciated!
Try adding a meta tag in the <head>
<meta name="viewport" content="width=device-width, initial-scale=1">