CODEWITHSUNDEEP
cssmedia-queries
Timmy Von Heiss
Timmy Von Heiss

Reputation: 2218

Can this code be done with less media queries?

This seems very repetitive, is there a way that I can combine this so that I do not have to write .more-photos a and @media over and over again? 

@media (min-width: 768px) and (max-width: 1199) {
  .more-photos a {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .more-photos a {
    font-size: 16px;
  }
}

@media (min-width: 1200px) {
  .more-photos a {
    font-size: 22px;
  }
}

Upvotes: 1

Views: 54

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371271

Slightly simplified version (one less media query):

.more-photos a { font-size: 22px; }

@media (max-width: 1199px) { .more-photos a { font-size: 14px; } }

@media (max-width: 768px) { .more-photos a { font-size: 16px; } }

Upvotes: 0

Rob
Rob

Reputation: 15160

No because that is how you write CSS rules and how they work. The only way to make your typing less might be to use a CSS pre-processor, such as SASS, which alleviates some typing but might not make your processed CSS look any different.

Upvotes: 1

Related Questions