CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Kirtle
Kirtle

Reputation: 38

My media query is not taking effect

I'm having some trouble using a media query. It's quite a basic thing but for some reason is not working.

Basically, I have a border around a div tag:

<div class="container games mobile">
    <div class="row">
        <div class="col-lg-8 div border"> 
<!-- This div tags are closed at the end of the file -->

I'm using bootstrap and don't honestly know if that can be part of the problem but what I wanted to do was to remove that border whenever the user was in a mobile, and to do so, I added the following lines in my css file:

@media screen and (max-width: 600px) {
       .border {
        border: none;
    }
}

Border on computer

Border on mobile even though I used the querie

(added a grey square on both prints because the content doesn't really need to be in here but a live preview can be found here)

Could the issue be parent>child related?

Thanks in advance!

Upvotes: 2

Views: 71

Answers (2)

bhansa
bhansa

Reputation: 7504

Use css specificity here instead using !important. why not !important?

@media screen and (max-width: 600px){
  .games.mobile .border {
      border: none;
  }
}

Upvotes: 1

Diego Fortes
Diego Fortes

Reputation: 9790

It's not working because it's being overwritten by bootstrap code. Try this:

@media (max-width: 600px) {
       .border {
        border: none !important;
    }
}

Upvotes: 1

Related Questions