DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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");
  }
}

Top comments (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠