CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
oversoon
oversoon

Reputation: 360

CSS not overriding Bootstrap Margin tag in @media Query

In my @media query I'm trying to change the margin top(mt-5) assigned to a h1 heading tag in my HTML. The other conditions work but not margin. My css sheet is linked below the bootstrap one.

I've tried adding a class to the h1, also targeting all h1s in that id.

Codepen link

HTML

<h1 class="mt-5 wcu-title">
    Why Choose Your Computer Assistant Ltd?
</h1>

MEDIA QUERY

  #showcase-wcu h1 
  {
    margin-top: 10px;
    font-size: 30px;
    width: 60%;
  }

Upvotes: 0

Views: 226

Answers (2)

Rachel Gallen
Rachel Gallen

Reputation: 28563

I would suggest you remove or replace the mt-5 class. The mt-5 class is defined as margin-top:3rem!important. The fact that it's default definition includes !important means that even if you redefine it as 10px in a media query using !important, this will not succeed as the media query will be read second.

Using a different class to the mt-5 class would appear the best option. You could alternately create a unique id that includes the mt/wcu title properties and redefine that in your media css.

Upvotes: 3

Badr Errami
Badr Errami

Reputation: 134

The .wcu-title in the media queries seems to be overriden by the mt-5 class, the solution would be to also modify the mt-5 tag within the media queries while not modifying other elements with mt-5, the following code seems to be working.

    @media (max-width: 600px) {   
        .wcu-title {
            font-size: 30px;
            width: 60%;   
        }   
        h1.wcu-title.mt-5 {
            margin-top: 10px !important;   
        } 
    }

Upvotes: 1

Related Questions