Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Dávid Molnár
Dávid Molnár
27,081 Points

Different browser, different context..

Hey everyone!
I usually use <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag so browsers will interpret the site in the same context, however while my site perfectly fits the .psd in chrome, in firefox it seems like we are looking the site from a further context though the values are the same. What could I do about this?

Nathan Thomas
Nathan Thomas
13,477 Points
Nathan Thomas
Nathan Thomas
13,477 Points

I’m curious if it’s actually the tag causing inconsistency. These suggestions come from stackoverflow:

Proper placement of this meta tag within your <head> tag

Use a CSS Reset to attempt to get consistent behavior across all browsers.

[http://meyerweb.com/eric/tools/css/reset/]

[http://developer.yahoo.com/yui/reset/]

Using relative font sizes in units such as ‘em’ or ‘%’ is another solution.

Here are some articles on the topic:

[https://www.quirksmode.org/mobile/tableViewport.html] [https://www.quirksmode.org/mobile/metaviewport/]

Alan Brown
Alan Brown
20,524 Points

Not sure what you are meaning when you say 'further context'. On mobile devices your site should be set to 100% width anyway. Check you haven’t got some fixed width element somewhere that is breaking the width. Also check it isn’t just font sizes. Are you using text-size-adjust?

1 Answer

Martha Brown
Martha Brown
4,380 Points
Martha Brown
Martha Brown
4,380 Points

Hello,

Did you download 'Normalize'? And you might check media queries. I am new to coding, so I do not feel very confident about helping. I vaguely remember the Treehouse video that covered the <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag. Hopefully this helped and did no harm.

Kind regards,

Martha