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 jQuery Basics (2014) Creating a Mobile Drop Down Menu Perform: Part 3

Posted by Aaron Endsley
Aaron Endsley
Courses Plus Student 17,625 Points

How to fix the code to work on all mobile devices

Its not so much a question as i noticed that the layout wasent changing on certain android phones, partially because screen sizes very so much on phones now

I changed the CSS to read this on the media queries.

```@media(min-width:320px) and (max-width:899px){ #menu ul{ display:none; } } @media (min-width:900px){ #menu select, #menu button{ display:none; } }

I also noticed that the screen size wasnt changing on mobile so i added  this underneath each link to the style sheet in the head section

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

I had to add the above code to each html document.

hope this helps.
Adam Yarber
Adam Yarber
2,507 Points
Adam Yarber
Adam Yarber
2,507 Points

Try this: <meta name="viewport" content="initial-scale=1, maximum-scale=1">

Jake Hudson
Jake Hudson
7,841 Points
Jake Hudson
Jake Hudson
7,841 Points

if you put your mobile css in first, and then use media queries with max-width as you scale up, you don't really have to have the min-width much (or at all).

example:

//universal css here.

@media (max-width:380) { //all of your specialized css for small mobile }

@media (max-width: 590) { // all of your specialized css for phablets }

@media (max-width: 900) { //tablet layout css (these are just examples, no reason I picked these numbers specifically) }

@wash-rinse-repeat

//if you're working in chrome in the developer window (f12 or ctrl+shift+i/j) //you can scale the window up and down there. (refresh if it doesn't respond to the resizing) //every time your layout breaks. add a new media query with a max width and adjust the layout.

//*I don't know if this is best practice, I would love to hear others' input, Its just how I do quick development for my web //design classes.

//I don't know why I'm still using single line comments. :P