CODEWITHSUNDEEP
csshtmlgoogle-chrome
SteinTech
SteinTech

Reputation: 4068

Chrome doesnt respond as expected to @media query

I'm building a responsive website and ran into a problem with Chrome not implementing @media query the same as Firefox.

On the image, Firefox is to the left (how I expect the design to look) and Chrome on the right. As you can see Chrome don't change according to the @media query. Same on mobile devices.

CSS:

@media-medium-width: 768px;

.bm-s-section-ill-wrap-item {
    max-width: 100%;
    margin: 2px;
    border-radius: 8px;
    border: 2px solid @dark-blue;
    flex: 1 1 48%;

    @media(min-width: @media-medium-width) {
        margin: 6px;
        border-width: 4px;
        flex: 1 1 32%;
    }
}

enter image description here

Upvotes: 0

Views: 70

Answers (1)

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

.bm-s-section-ill-wrap-item {
     max-width: 100%;
     margin: 2px;
     border-radius: 8px;
     border: 2px solid @dark-blue;
     flex: 1 1 48%;
}
@media screen and (max-width:768px) {
     .bm-s-section-ill-wrap-item {
          margin: 6px;
          border-width: 4px;
          flex: 1 1 32%;
      }
}

Upvotes: 2

Related Questions