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" />
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
How can I make my website have the same view even if it's viewed from a smartphone, tablet or PC? I have a table on the webpage. I've tried this but has no effect:
<meta name="viewport" content="width=device-width, initial-scale=1">
Your declaration is saying to size the web page to the width of the device, which it doesn't seem like you want. You actually want the opposite of this if you want it to show up on mobile similar to on desktop. Try setting a fixed viewport size, so that the website will not take screen size into account on mobile devices:
<meta name="viewport" content="width=1024">
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
I'm trying to get my website to be displayed at full scale in any mobile device, like in this example:
As of now, the website opens automatically zoomed-in, and my clients don't like that. I thought adding the line
<meta name="viewport" content="width=device-width, initial-scale=1">
would solve this, but it does nothing. I've tried playing with the initial-scale value to see if it worked and it does nothing. I've set it to initial-scale=0.5, for example, and it didn't change the way the page displayed (to clarify, it doesn't work neither on desktop browser nor on mobile devices).
I've been working on this for days, any help would be greatly appreciated!
EDIT: To clarify, this is a mockup of what I get vs. what I need.
Try to add the meta tags below:
<meta name="viewport" content="user-scalable=yes">
<meta name="apple-mobile-web-app-capable" content="yes"/>
and see it your request will be resolved.
I am not able to zoom my responsive site in IPhone and IPAD.But at the same time I am not having any problem with Android mobiles. It is perfectly zooming in and zooming out.
I am having the meta tag like this
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
Pretty much says it all on its own:
user-scalable=0
The Safari Web Content Guide tells us to use this when we want "to set the initial scale and to turn off user scaling." This is what prevents you from zooming in and out.
I think you should remove the last 3 atrributes,
, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0
entirely.
That should allow Mobile Safari users to scale if they want to.
You need to also set "minimum-scale=1.0" to whatever you want your users to be able to zoom to (as well as setting the "user-scalable" to 1), for example: 2.0 would 100% zoom.