Doubt - media screen

Asked

Viewed 37 times

0

Hello, good afternoon!

I’m creating a responsive website, so I need to create the breakpoints to adjust according to screen resolutions. However, I have a problem where I can only touch the div in a media . Example:

@media screen and (min-width: 1024px) {.servico {width:40%;}}

Right, it assigns that when reaching 1024 pixels the size of my service class will change to 40%, with this I need that when the resolution gets bigger I use a new size for service class, so I will use it as follows:

@media screen and (min-width: 1100px) {.servico {width:20%;}}

Only at the breakpoints I’m creating, you’re only reading the first, the 1100 pixel doesn’t read..

Does anyone know why this is happening? I am doing something wrong?

Thank you!

css responsive
  • 1

    You put the second rule (min-width: 1100px) after the first (min-width: 1024px)?

  • Good evening, Yes, the 1024px rule is on top of the 1100px!

  • @Denilson Cara, the way you posted your CSS, was supposed to work. Except for the issue of the order of media queries. Is there any more styling on top of this class? Post EVERYTHING related to this class in your . css for us to analyze.

  • Friend if possible put your full @media in the order as they appear in your .CSS. and see if this solves your problem https://answall.com/questions/351972/media-queries-n%C3%A3o-funciona-medidas-informadas/351977#351977

1 answer

0

try to add:

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

Browser other questions tagged css responsive

You are not signed in. Login or sign up in order to post.