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
Sofia Martinez
11,607 PointsProblem with responsive design/media queries
Hi! I'm building a website and I'm implementing the responsive method of designing for mobile first, and then, with media queries, adapt it to larger viewports. So, my code looks like this:
```body {general design} header {mobile design} a {mobile design} etc.
```@media screen and (min-width: 768px) {
header {larger viewport design}
a {larger viewport design}
etc.
}
When I see the website on a laptop or desktop works perfectly, but in a tablet or smartphone, the design is the same as in the laptop! Is just like zoom out... but it doesn't recognize the code for small viewports.
Can anyone help me, please?
5 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Sofia,
Are you using any meta tags like this?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This prevents the browser from doing any initial zooming out on the site to get it to fit.
Jose Gonzalez
1,227 PointsIt sounds like your issue might be within the viewport of the head.
Try adding this code in your head tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Jose Gonzalez
1,227 PointsCode wasn't viewable.
<code><meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no"></code>
Jose Gonzalez
1,227 Points <meta name="viewport" content="width=device-width, initial-scale=1.0">
```
Had to reference the Markdown Cheatsheet for syntax to work.
Sofia Martinez
11,607 PointsOk, now is working I had to refresh a couple of times. Thanks a lot!
Jason Anello
Courses Plus Student 94,610 PointsYou're welcome.
Ignore my questions, I hadn't seen this comment yet.
Glad you sorted it out.
Sofia Martinez
11,607 PointsSofia Martinez
11,607 PointsYes! It solves the mobile issue, thanks!... but now, in the larger version it doesn't recognize the code that applied for both... just the one inside the media querie. Do I have to repeat that code?
Sofia Martinez
11,607 PointsSofia Martinez
11,607 PointsNo... sorry, that isn't whats happening... It recognized basic and general code like background, fonts, etc.... but some parts doesn't display the css correctly, specifically header and footer.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsOk, do you have your general and mobile styles at the beginning of your custom css and outside of any media queries?
Then your media queries are simply overriding or adding to the previous general and mobile styles?
Maybe give an example of one part that isn't working correctly.