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 PUC Treehouse
PUC Treehouse
7,021 Points

media query for retina screen like iMac

i used these media queries, but it's still small on iMac screen. @media (min-width: 320px) {} @media (min-width: 720px) {} @media (min-width: 1200px) {}

so do anyone know how to fix it? ratio?

Brent Suggs
.a{fill-rule:evenodd;}techdegree seal-36
Brent Suggs
Front End Web Development Techdegree Graduate 21,343 Points

What do you mean that it is still small?

The media screens should work whether or not it is an iMac. Though you might try to add the screen specification to your Media Query. 

@media screen and (min-width: 320px) {}
louiecamacho
louiecamacho
10,980 Points

Could you add that part of your CSS? I'm just wondering what kind of CSS you have in those media queries.

PUC Treehouse
PUC Treehouse
7,021 Points 
//---------------------------
//----- Screen Query
//---------------------------

$phone: 320px;
$tablet: 720px;
$laptop: 1200px;
$desktop: 1920px;

//---------------------------
//----- Media Query
//---------------------------
  @media (min-width: $phone) {

  }
  @media (min-width: $tablet) {

  }
  @media (min-width: $laptop) {

  }
  @media (min-width: $desktop) {

  }

1 Answer

Jason DeValadares
Jason DeValadares
7,190 Points
Jason DeValadares
Jason DeValadares
7,190 Points

You can make all the media queries you want but if you don't tell it to use the viewport size (a pixel is not a pixel), it'll never implement them. 

<meta name="viewport" content="width=device-width">
PUC Treehouse
PUC Treehouse
7,021 Points 
block metatags
      meta( charset='utf-8' )
      meta( name='viewport', content='width=device-width,initial-scale=1.0' )