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
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:
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
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)