CSS не перекрывает тег Bootstrap Margin в @media Query

Question

В моем запросе @media я пытаюсь изменить верхнюю границу (mt-5), присвоенную тегу заголовка h1 в моем HTML. Другие условия работают, но не маржа. Мой лист css связан под начальной загрузкой.

Я пытался добавить класс в h1, также нацеливаясь на все h1 s с этим идентификатором.

Кодовая ссылка

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%;
  }

Answer 1

Я бы предложил вам удалить или заменить класс MT-5. Класс mt-5 определяется как margin-top:3rem!important. Тот факт, что это определение по умолчанию включает !important, означает, что даже если вы переопределите его как 10px в медиа-запросе, используя !important, это не будет выполнено, так как медиа-запрос будет считан вторым.

Использование класса, отличного от класса mt-5, будет лучшим вариантом. Вы можете поочередно создать уникальный идентификатор, включающий свойства заголовка mt / wcu, и переопределить его в медиа-файле CSS.

Answer 2

. Заголовок .wcu в медиазапросах, кажется, переопределяется классом mt-5, решением было бы также изменить тег mt-5 в медиазапросах, не изменяя другие элементы с помощью mt-5, Кажется, работает следующий код.

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