CSS Problem

I am having problems formatting my site for mobile and other devices

With the font set at 100% in the body styling tag like so:


body { font-size: 100%;}


Which means the base font is 16px

I have tried to use inside the #wrapper styling


#wrapper {width: 62.5em;}

Only to find that the width of the page is smaller than the 1000px equivalent that I want i.e. approximately 875px

Hi, Welcome to Sitepoint :slight_smile:

I think we may need a little more information here to see what’s going on. Do you have a link to the site or a small demo we can see?

You mentioned mobile and other devices so where specifically does this problem occur. Are you seeing it on desktops? Desktops show the wrapper as 1000px wide. Remember though that not all browsers set the base font to 16px (although most do) but this can also be changed via the user. I’m not sure what the defaults on mobiles are either.

If the problem is just on mobile then what mobile strategy are you using? Do you have the viewport meta tag in place and are you delivering special styles to mobile via media queries? If you are doing neither of those things then your layout will just scaled to fit on a mobile device
(it will assume your site is 980px wide and scale it to fit in the 320px viewport).

For mobiles you should be delivering a different experience and a width of 1000px is not going to fit on to a mobile unless its scaled microscopically small.

If you have a link to the site or a small demo then it may be easier to spot what is going on:)

I know that all browsers are not based at 16px, I’ve even tried with the font-size set at 16px to see if that fixed the problem, but it didn’t

No, I wasn’t using 980px for the mobile as I have media queries set for min width = 320 and max width = 480 and other media queries set for other devices

I will reset my beta set soon to show you what is happening, then give the link out, I don’t know how to do a demo of the site

You can easily make up a demo page that demonstrates the problem. Here’s an explanation of how to do that: http://www.sitepoint.com/forums/showthread.php?1041498-Forum-Posting-Basics


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{
	background:#000;
	color:#FFF;
	font: 100% Arial, Helvetica, sans-serif;
}

#wrapper {
	margin-top:10px;
	width: 62.5em;
	background:#333;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	padding-top:5px;
}
</style>
	
</head>
<body>

<div id="wrapper">

</div>


</body>
</html>

I didn’t quite get what was meant by a demo, I am used to the word script

Hi,

No, I wasn’t using 980px for the mobile as I have media queries set for min width = 320 and max width = 480 and other media queries set for other devices

If you don’t have the viewport meta tag in place then mobiles will not take any notice of your smaller width media queries because they will assume the page is 980px width (no matter what you have set it) and then scale it to fit the small device.

You need to add the viewport meta tag for proper responsive web design:


    <meta name="viewport" content="width=device-width, initial-scale=1.0">  

Now mobiles will not scale the page but obey the rules that you have set for width in your media queries. For these devices you would remove any physical widths as such (like your 62.5em wrapper) and usually let the elements be auto width so that they fill the smaller screen and then you adjust your elements to fit in the smaller screen (e.g. reducing 3 columns into one column and so on…)

Only to find that the width of the page is smaller than the 1000px equivalent that I want i.e. approximately 875px

How do you know the element is 875px wide? It’s not possible to tell that on a mobile with any accuracy or are you talking about on desktop.

You also need to remove margins and padding from html and body or your element will be smaller still on mobiles.


html,body{margin:0;padding:0}

If you haven’t got a live version for us to see yet then perhaps a few screenshots would clarify the situation as I feel we may be talking at cross purposes here :slight_smile:

Ooops, I thought I had the viewport tag in my design knowing that the media query was in?

I will report to you back soon, thanks, but keep this thread open, if it’s poss

I think this was a combination of poor css and html scripting on my behalf, plus my lack of understanding of the em/pt/% and thinking that the viewport tag was inside the html header

I guess we all learn, thanks for the help everyone

How I knew it was only 875 px is because I took a screenshot of the width of the wrapper (because it is a different colour to the main body) with the snipping tool (Windows)