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

Posted by Paul Murphy
Paul Murphy
6,162 Points

Responsive - for laptops and smaller screens

Hi Guys,

I'm a bit stuck....

Creating a website with a primary nav and a secondary nav underneath which consists of images (all 280px * 185px). The images resize for mobile design but I can't seem to get them to change size for this media query: 

@media (min-width: 481px) and (max-width: 767px)

I want the images to become smaller so that they will all fit in a line with one another as at the current size when the viewport size is reduced the images push onto the next line.

Any help would be appreciated.

4 Answers

Oleg Knyazev
Oleg Knyazev
12,363 Points

Hey Paul! Try using max-width: 768px instead of 767, because you'd want to target the bigger screens, starting from 769px.

@media only screen and (min-width: 481px) and (max-width: 768px) {
 //your code here
}
Paul Murphy
Paul Murphy
6,162 Points

None of the suggestions have done anything. It seems as though whatever changes I make they aren't being applied in the browser.

I just want the images to resize when the viewport is between 481px & 768px. I don't understand why the changes aren't being applied in the browser.

Nemanja Pribilovic
Nemanja Pribilovic
5,366 Points
Nemanja Pribilovic
Nemanja Pribilovic
5,366 Points

I think you need to add screen after media

Cosmin Cioaclă
Cosmin Cioaclă
21,339 Points
Cosmin Cioaclă
Cosmin Cioaclă
21,339 Points 
@media screen and (min-width: 481px) and (max-width: 767px)
Nemanja Pribilovic
Nemanja Pribilovic
5,366 Points

does it work like that ?

Paul Murphy
Paul Murphy
6,162 Points

Adding the screen parameter actually takes out all of the styling that I have added in the CSS. Any other suggestions? I presumed that not declaring "screen" would target all media types.

Cosmin Cioaclă
Cosmin Cioaclă
21,339 Points

Please post more of your css code so we can get some context. Preferably the media query that doesn't work and one that does, if you can't post the whole file.

Paul Murphy
Paul Murphy
6,162 Points
Paul Murphy
Paul Murphy
6,162 Points

sorry guys... should have posted this first time around

http://codepen.io/paul-masteel/pen/jDcba