CODEWITHSUNDEEP
htmlcsslayoutresponsive-designmedia-queries
Niccolo
Niccolo

Reputation: 157

Same Media Query Min and Max Width with Different Layouts

I'm having a problem with media queries in terms of layout. Example, I have:

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

    .this-is-a-box {
      font-size: 20px;
      padding-left: 5%;
      padding-right: 5%;
    }

}

But when the layout becomes smaller than 920px in width, I will need the value to achieve:

.this-is-a-box {
   font-size: 15px;
   padding-left: 1%;
   padding-right: 2%;
}

Hope someone can help with this one.

Thanks!

Upvotes: 1

Views: 1073

Answers (2)

Niccolo
Niccolo

Reputation: 157

Was able to experiment on GolezTrol's suggestion and instead did it like this:

@media screen and (min-width: 768px) and (max-width: 919px) {

css here

}


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

css here

   @media screen and (min-width: 920px) {

      css here
   }

}

Never knew that was possible. But any drawbacks on this?

Thanks!

Upvotes: 0

GolezTrol
GolezTrol

Reputation: 116110

Soooo why not use two media queries to specify that boundary? 

/* Small screens */
@media screen and (max-width: 919px) {

    .this-is-a-box {
       font-size: 15px;
       padding-left: 1%;
       padding-right: 2%;
    }

}
/* Larger screens */
@media screen and (min-width: 920px) {

    .this-is-a-box {
      font-size: 20px;
      padding-left: 5%;
      padding-right: 5%;
    }

}

Upvotes: 2

Related Questions