CODEWITHSUNDEEP
htmlcssmedia-queries
ptvty
ptvty

Reputation: 5674

media queries : limit some css styles according to the screen size

when I write some style in layout.css it applies in every screen size and in /* #Media Queries section, you have these sections:

/* Smaller than standard 960 (devices and browsers) */
/* Tablet Portrait size to standard 960 (devices and browsers) */
/* All Mobile Sizes (devices and browser) */
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */

so none of these do what I want.

Where should I write large screen specific css codes?

Upvotes: 3

Views: 2275

Answers (1)

RbG
RbG

Reputation: 3213

suppose you have a div like <div claas="example"> </div>

now write a css for .example which will be applied for those screen which are larger than range you mentioned in your media query

.example{
  /*..for larger screen style goes here....*/
 }
@media screen and (max-width: 1400px) { 
  .example {
    /*...now give style for those screen which are less than 1400px...*/
  }
}
@media screen and (max-width: 1300px) {
  .example {
    /*...now give style for those screen which are less than 1300px...*/
  }
}

in the above you code you mention three different styles for

  1. >1400px screen size
  2. for 1300 to 1400px screen size
  3. <1300px screen size

EDIT::

"/* Larger than standard 960 (devices and browsers) */"

.example{
  /*..style for larger than 960px....*/
 }
@media screen and (max-width: 960px) { 
  .example {
    /*..style for lesser than or equal to 960 px...*/
  }
}

Upvotes: 2

Related Questions