Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

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

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,419 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

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