I recently built a site and centered it using margin: 0 auto. I also wrapped elements in a .wrapper class with a width set to 960px and then had the parent element extend across the whole browser.
When I view the Brands screen on an iPad though, the site is left-aligned and does not extend across the whole window. Any thoughts to why this might be happening, and how to correct it?
See below for a screenshot:
Looks like you’ve got a few validation errors on that page:
http://validator.w3.org/check?uri=http://www.propet.com/brands/&charset=(detect+automatically)&doctype=Inline&group=0
I suspect they might be causing the issue. If you look at the page in e.g. Chrome, you’ll see a horizontal scrollbar and space outside your wrapper <div> there, so the issues aren’t limited to the iPad.
This works for a centered webpage with a width of 1024px:
<meta name="viewport"
content="width=device-width, initial-scale=0.95, maximum-scale=0.95">
Related
I'm working on a page template with a header at the top of the page. Nothing complex:
<div class="top-header">
text
</div>
.top-header {
width: 100%;
height: 50px;
}
In Chrome, that produces what I expected...a bar across the top 50px high and as wide a my viewport. Resizing my browser changes with width, but not the height, which is fixed at 50px.
However, using Chrome's Developer Tools, I realized that when viewing in responsive mode, the header resizes vertically. In essence, there's a level of full-page zoom going on.
What key concept am I missing here? I assume it might be a zoom property on the body. How to I ensure that my header is 50px on all devices?
Screen shots:
Top is using Chrome's responsive mode, bottom is simply resizing Chrome to the same width not using responsive mode.
You are probably missing the viewport meta tag, to control the layout on mobile browsers.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
From Apple's documentation:
Safari on iOS displays webpages at a scale that works for most web
content originally designed for the desktop. If these default settings
don’t work for your webpages, it is highly recommended that you change
the settings by configuring the viewport. You especially need to
configure the viewport if you are designing webpages specifically for
iOS. Configuring the viewport is easy—just add one line of HTML to
your webpage—but understanding how viewport properties affect the
presentation of your webpages on iOS is more complex. Before
configuring the viewport, you need a deeper understanding of what the
visible area and viewport are on iOS.
This other anwser does a very good job explaining why you need to specify it: Is the viewport meta tag really necessary?
I have set up a mobile web site of http://www.berlin-ra-kanzlei.de/ ... but for an unknown reason it always seems to be zoomed in just A LITTLE BIT (maybe 1 - 3%?). There is always missing some milimetres of the right side and I can zoom out with a pinch.
It also happens, when I am on the site and clicking another page. It just does not want to show the complete page from the beginning, although I have set the boxes to width: 100%;.
Btw, I have set
<meta name="viewport" content="width=device-width, initial-scale=1">
Without it my layout goes bananas on mobile devices and setting it to a lower initial-scale does not help either. There is till missing a little bit on the right side.
But I do not want to forbid zooming! I just want to have it all seen on initial loading/visiting.
So, I think it has to do with some CSS values or so. Maybe I have set something over 100% width or so? Because if I zoom/pinch out after loading, it works just fine ... until loading another page of the web site, of course.
Thanks a lot in advance, mates.
Set your box model for the the #container and #header divs to border-box:
box-sizing: border-box;
You may need to prefix this depending on what browsers you are supporting.
More info here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
I need some troubleshooting help from some CSS experts. :)
My website at www.daylightfoods.com loads perfectly on full desktop browsers. While the home page on mobile devices works as well, the sub pages on mobile devices have a problem with the navigation div at the top. I am finding that the navigation div (where the grey background is and the navigation links) is not expanding to the full width of the mobile device screen. I can't figure out why, and would love some help!
I have been doing my mobile testing Google Chrome for iOS (both iPhone 5S and iPad).
Here is the page in question:
http://www.daylightfoods.com/sustainability/
It loads perfectly well on desktop versions, but on mobile devices the navigation at the top for some reason is not full 100% width.
Any help would be greatly appreciated!
It is caused by <meta name="viewport" content="width=device-width"> on your subpages
Check if, inside the div, you have any hidden elements for which you have not set "width: 100%".
In my case I had an hidden img (set to only show up only on large screens) that didn't have a "width: 100%" attribute and thus, even when not visible, the image was extending outside of the parent container (the div), preventing the parent container to take all available screen space.
Hope it helps.
Apologies in advance for the rudimentary nature of this CSS question.
I'm trying to figure out how to deal with widths in CSS. I have an absolute positioned <div> containing a fairly wide table. The <div> is "1300px" in width. Everything works fine on desktop browsers. People with high resolution monitors see the entire table. Those with low resolution, or those who are viewing the page from a smaller browser window, are able to horizontally scroll the div to see the entire content. All is good.
But something different happens on the iPad2 (Safari) which has a native resolution of 1024px. I expected the iPad to show the first 1024px of content and allow the user to horizontally scroll (swipe?) to see the remainder of the table. Instead, it seems to be trying to cram the entire 1300px into the 1024px screen and then shrinking the type to make everything fit.
What's the standard way of using CSS to tell the iPad browser to show whatever it can at it's native resolution (i.e. 1024) and then allow the user to swipe/scroll horizontally if he wants to see the rest? A small snippet of code would be helpful.
Thanks.
By default iOS Safari will scale down any page to fit the screen. If it's not your desired behavior you can instruct the browser via meta viewport tag in the <head>.
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
Edit: more in-depth explanation: http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/
I don't have an iPad so I can't see, but a few points:
Your xhtml is not valid. <center> doesn't exist anymore (and by the looks of things isn't actually needed in the design anyway), also you should specify the dimensions of any the header image in px.
Don't know why you're using margin:auto on anything other than the mainwrap. Try margin:0; instead.
Try adding * {margin:0; padding:0} to the top of your stylesheet, and then adding in any extra padding and margin you need later - this will more or less set all browsers to the same starting point when it comes to layout.
If you don't want a border use {border:none} (if you say border: 0px solid; some browsers will still try and draw something)
This might not fix the problem, but it will be step in the right direction as the more valid your markup is the easier browsers find it to render.
Try removing width:100% from any of the parent element, then try to fix it.
Hope that it works for you.
I'm designing a mobile version of my website, which should be like a mobile application.
The problem is that there is a strange width to my html element in my mobile browser. I have tried setting body and html to width:480px; and the content is 480px but even then there is a lot of whitespace next to the content (estimated at about 300px). The effect of this is also that the website is not zoomed to the content but to the content + the whitespace and you first have to zoom in to properly use the website.
Ofcourse I want to use width:100%; so it renders well on different screen sizes.
Does anyone know what's going on or how to fix it?
Edit
The html code is just straightforward xhtml transitional, nothing special. In the css I have:
body, html {
width:480px !important;}
But if I would not set a width to those it should work right? I also don't set a width for any other elements (other than like buttons 100px and things like that) and if I view the mobile version on my computer no elements seem to be wider than the body.
Have you add the viewport meta tag ?
<meta name="viewport" content="width=device-width, initial-scale=1.0" />