My media query is not taking effect

Question

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!

score 1 · Accepted Answer · answered Apr 03 '18 at 20:30

1

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

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

answered Apr 03 '18 at 20:30

Diego Fortes

8,830
3
32
42

I was almost certain there wasn't a border class in bootstrap that's why I didn't even bother on checking *sigh. Thanks! – Kirtle Apr 03 '18 at 20:36
3

sometimes its better to avoid using !imporatant, when things can be handled using normal hierarchy. – bhansa Apr 03 '18 at 20:45
No problem! I agree, avoid using `!important` as much as you can. For the sake of your issue we are going with a quick-fix, but ideally you don't want to use it. – Diego Fortes Apr 03 '18 at 20:47

bhansa · Answer 2 · 2018-04-03T20:43:14.890

1

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

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

edited Apr 03 '18 at 20:43

answered Apr 03 '18 at 20:36

bhansa

7,282
3
30
55

I didn't know about css specificity. Gonna take a look at it and try to use it in the future! I could have fixed many of my problems already if I knew this before xD – Kirtle Apr 03 '18 at 20:44
that's why added the links, feel free to spend time on it. – bhansa Apr 03 '18 at 20:45

My media query is not taking effect

2 Answers2