CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3media-queries
ZEE
ZEE

Reputation: 5849

Issue when trying to apply a @media query with Bootstrap

I'm trying to apply a @media query so when the max-width reach 991px a padding-left will be added to the class, but nothing happens when the max-width reach 991px and the main of the page start to wrap under the aside, I'm using bootstrap and here is a part of the Code :

CSS

@media(max-width : 991px) {
    .mainIcon {
        padding-left: 47px;
    }
}

HTML 

<section class="mainin">
      <div class="container-fixed mainIcon">
        <div class="row mainFoto">
          <div class="col-md-4">
            <img src="images/code_big.png" alt="">
            <a class="boutonCode">Code</a>
          </div>
          <div class="col-md-4">
            <img src="images/tutoriel_big.png" alt="">
            <a class="boutonTutoriel">Tutoriels</a>
          </div>
          <div class="col-md-4">
            <img src="images/foucha_big.png" alt="">
            <a class="boutonfoucha">PROJECTS</a>
          </div>
        </div>
        <header class="globalTitle">
        <a href="" class="atitle"><h1 class="title">Turn Your Brean <span>On</span></h1></a>
        <h2 class="subtitle">design the future</h2>
        </header>
      </div>

    </section>

LIVE DEMO

when i inspect the page and try to reduce the width of the browser once he is less than 991px i see that the padding-left is not applied , i can't figure out how to fix this !

enter image description here

Upvotes: 0

Views: 77

Answers (2)

Sathish
Sathish

Reputation: 2460

@media only screen and (max-width: 991px)
{
.mainIcon {
        padding-left: 47px;
    }
}

or use !important

padding-left: 47px !important;

Upvotes: 0

jmore009
jmore009

Reputation: 12923

The issue appears to be that you're calling your media query at the top of the page but the regular styles for .mainIcon below it. This is causing the media query to be overwritten by the normal styles which would explain the adjusted padding-left being crossed out when you expect the element. A good rule of thumb is to always include your media queries below your other CSS (or at least under the class/id/etc. you're looking to change).

try:

.mainIcon {
  width: 99%;
  padding-top: 14%;
  padding-left: 20%;
}

@media (max-width: 991px) {
  .mainIcon {
    padding-left: 47px;
  }
}

Upvotes: 1

Related Questions