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

CSS CSS Basics (2014) Enhancing the Design With CSS Adjusting the Layout with Media Queries

William Nsambu
William Nsambu
3,502 Points
Posted by William Nsambu
William Nsambu
3,502 Points

<meta name="viewport" content="width=device-width">

Hi, I added the <meta name="viewport" content="width=device-width"> to control the way the page is displayed on iPhone 6 and it worked. However when I changed the device to Galaxy S5, the page wasn't showing very good. The title of the page was showing out of the limits.

Thanks,

Rohit Upadhyay
Rohit Upadhyay
Courses Plus Student 37 Points

Hey William ,

<meta name="viewport" content="width=device-width">

It is use to get different layout of website on different devices. I read above that you getting different view on Iphone 6 & galaxy s5. You can adjust all those webpage elements layout on different viewport by using css media query.

Eg:-

 @media screen and (max-width 320px){
     //css you want to apply
};

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Hi William,

There may be a couple of reasons why this is I wonder if what's happening is your targeting different browser widths based on specific devices?

When you're using media queries it's no longer sufficient to target particular devices as there are so many now on the market. A breakpoint in media queries, is precisely that; a point in the browser width in which the layout breaks and you need to use a CSS rule with a media query that fixes the broken layout.

Also there may be issues with images as these appear differently in apple based devices. You can see how to deal with this in the Reponsive Layouts HTML course. Hope this helps :)

William Nsambu
William Nsambu
3,502 Points
William Nsambu
William Nsambu
3,502 Points

Thanks, Let me try it and see the results