DEV Community

Cover image for Responsive space site
Heggy Castaneda
Heggy Castaneda

Posted on

Responsive space site

How to set media query for following criteria:
When
The screen has a min-width of 768px
The screen has a max-width of 1024px
The screen has an orientation of landscape
Make
title, description float left

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

  .page-title, .page-description {
    float: left;
  }
}

How to set high resolution screen display:
When
The screen min-resolution is 80 dpi
Make
Image more crisp


/* high resolution screen display media query
 */
@media only screen and (min-resolution: 80 dpi) {
  .logo {
    background-image: url("../img/cowboy@2x.png");
  }
}

Oldest comments (0)