I am trying to use foundations hide-for-small class to hide my navbar on mobile. It doesn't appear to be having any affect. As far as I understand
<h1 class="hide-for-small">Hidden on Mobile</h1>
should show the element on my computer, but hide it on my iPhone.
What am I missing?
It turns out it was a simple mistake, I left out my viewport meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Related
I have a problem. On my site http://www.veniria.esy.es when I'm swiping out the navbar, the content should move to the right with the navbar - and it do so - on PC. When I'm trying to swipe out the navbar on smartphone, the whole page scales down, and I don't know why. Can somebody tell me what am I doing wrong?
You haven't set up your viewport for mobile. Just add this to your <head>
<meta name=viewport content="width=device-width, initial-scale=1">
I tested on iPhone and it didn't scale down to me.
However, I noticed the viewport is not mobile friendly.
Try putting this on inside <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
For some reason I can't seem to find help on this from searching the internet... perhaps I'm not wording it well.
I've had this problem come up previously, but for right now it's on this website:
http://merchantbankingresources.com/
You can see in the screenshot that the website is pushed to the left and very narrow. It's on an iPhone 4s.
The proper sizing of the page is controlled by the viewport meta property. Adding something as below to your website's head would scale your website automatically to the device width.
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
After putting it in, you can make your page occupy whole page with width:100%;.
EDIT- The <ul> in your gform is actually causing the problem. It is rendering to a wrong position.
EDIT- Change the .gform_body css. It gives it a left of 500px
Try adding this code in the HEAD
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="cleartype" content="on" />
I thought this was a classic case of the html, body not wanting to stretch, but the issue lies within the page itself.
I created this page based on bootstrap and when I test it with http://www.mobilephoneemulator.com/ the page goes into full-width mode, adjusting to the screen-size of the browser on the phone. However, when I do this on my real IPhone 6 (and also IPad), it does not seem to do this (both in Safari and Chrome) and I'm not sure why. Perhaps this behavior occurs because it automatically tabs into the Username field, thus zooming out? I attached a screenshot:
Try adding the viewport meta to the header of your page. It's quite important for mobile sites to control the zooming:
<meta name="viewport" content="width=device-width, initial-scale=1">
More information is at Mozilla's MDN: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
Its because the width is set to 50% because of the class col-sm-6.
Please add col-xs-12 to the div to the make its width 100%
Please refer to Bootstrap's Documentation
Make the class on the parent div 'container-fluid'.
<div class="container-fluid">
Adjust the bootstrap classes to:
<div class="col-sm-12">
Hope this helps.
#John I think the problem Is with the zooming Here, add this <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> in the <head> tag, That should do the trick!
Here is my website, www.offergrind.com
I made it fully non-responsive but the problem is that if we view it in mobile it is displaying the top left part.
Is there any code such as
<meta name="viewport" content="width=SITE_MIN_WIDTH, initial-scale=1, maximum-scale=1">
What should i do to make the website to display fit in mobile view ?
Start with this. At minimal, it will make your website fit the device, but everything will be sized down.
<meta name="viewport" content="width=device-width">
You should also look in CSS pre-processors, I was blown away by how many CSS files you reference.
I would get rid of the viewport meta tag altogether. If your website was not designed to be responsive, it will only make things worse. See this for more:
Stop using the viewport meta tag (until you know how to use it)
Use the below meta tag for your website
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
The meta tag above explains everything:
width="device-width" width of the website is equal to device width
initial-scale=1.0 means the website will not scale to fit the device screen
when we set minimum-scale=1.0, maximum-scale=1.0 and user-scalable=0 means user will not be able to scale the webpage (it will turn off pinch-zooming by setting maximum-scale to 1, or using user-scalable=no. )
So on this website I've been building I gotten to the point where I test to see what it looks like in other resolutions and browsers. The only problem that I have is with my navbar. The tabs in the nav bar get pushed down to the next line of the page. So my question is how can I scale it so that it fits with in the 960 desgin on all/most resolutions?
I've tried
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<meta name="viewport" content="width=1024, initial-scale=1">
but that doesn't work.
http://www.chrhsink.net23.net
You would need to make it "responsive" somehow... Using media queries as stated by Log1c is an option. Maybe this post (http://java.dzone.com/articles/getting-started-responsive-web) might give you a good idean on what needs to be done.