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
PUC Treehouse
7,021 Pointsmedia 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?
louiecamacho
10,980 PointsCould you add that part of your CSS? I'm just wondering what kind of CSS you have in those media queries.
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
7,190 PointsYou 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
7,021 Pointsblock metatags
meta( charset='utf-8' )
meta( name='viewport', content='width=device-width,initial-scale=1.0' )
Brent Suggs
Front End Web Development Techdegree Graduate 21,343 PointsBrent Suggs
Front End Web Development Techdegree Graduate 21,343 PointsWhat 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) {}