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 Olly Browning
Olly Browning
1,349 Points

How can I get the functionality of two different 'max-width' rules? One for desktop, one for small screens.

I have a side-project photography website which uses a very simple Tumblr theme

http://freeguernseyimages.tumblr.com

My problem is that the site has images of 'max-width: 100%;'

This looks great on mobile, however when you're browsing on Desktop, the images taken in Portrait orientation are pretty big, so it's a lot of scrolling to see the whole image.

I'd basically like to make it so that on Desktop, the max-width is about 70%, and on mobile back to 100%.

I tried entering code like below in the Custom CSS feature of Tumblr, but it didn't do anything. I know it's probably a really simple fix but I can't find it!

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    img { max-width: 100%; }

Thanks for your help!

2 Answers

Jeff Busch
Jeff Busch
19,287 Points

Hi Olly,

You need to make two separate media queries. Something like:

/***** Larger Screen *****/
@media screen and (min-width: 480px) {
  img {
    max-width: 70%;
  }
}

/***** Smaller Screen *****/
@media screen and (max-width) {
  img {
    width: 100%;
  }
}

Jeff

Olly Browning
Olly Browning
1,349 Points
Olly Browning
Olly Browning
1,349 Points

Hey Jeff, thanks for replying so quickly.

This worked perfectly - so thanks a ton for your help! :)