CODEWITHSUNDEEP
htmlcssmedia-queries
BeniaminoBaggins
BeniaminoBaggins

Reputation: 12433

CSS media queries not working in any browser

These media queries do not work. What am I doing wrong?

I include this in the <head>:

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

css:

    /* LESS THAN 75 (LG) */
    @media (max-width: 74.9em) { 
            .circle { 
            height: 100px;
            width: 100px; 
        }
    }

    /* LESS THAN 62 (MD) */
    @media (max-width: 61.9em) { 
            .circle { 
            height: 100px;
            width: 100px; 
        }
    }

    /* LESS THAN 48 (SM) */
    @media (max-width: 47.9em) { 
        .circle { 
            height: 75px;
            width: 75px; 
        }
    }

    /* LESS THAN 34 (XS) */
    @media (max-width: 33.9em) { 
        .circle { 
            height: 50px;
            width: 50px; 
        }
    }

.circle {
    border-radius: 75px;
    border: 1px solid $accent;
    display: inline-flex;
    margin:10px;


}

html:

<div class="row" id="middle-row">
   <div class="col-md-10 offset-md-1 flex-xs-middle">
      <div id="main-text-container">
         <h5 class="display-6">vepo</h5>
         <h1 class="display-3">
            find vegan {{word}} near you.
         </h1>
      </div>
      <div class="col-md-10 col-sm-12 offset-md-1 flex-xs-middle" id="circles-div">
         <div class="circle" (mouseover)='over("cupcakes")' (mouseleave)='over("stuff")' id="cupcake">

         </div>
         <div class="circle" (mouseover)='over("pancakes")' (mouseleave)='over("stuff")' id="pancake">

         </div>
         <div class="circle" (mouseover)='over("burgers")' (mouseleave)='over("stuff")' id="burger">

         </div>
         <div class="circle" (mouseover)='over("groceries")' (mouseleave)='over("stuff")' id="groceries">

         </div>
      </div>
      <div class="col-md-10 offset-md-1 flex-xs-middle" id="try-now-div">
         <custom-button buttonName="try now" (click)="tryNowClick()"></custom-button>
      </div>
   </div>
</div>

Upvotes: 0

Views: 54

Answers (1)

jeremykenedy
jeremykenedy

Reputation: 4275

You're doing it backwards. Start in the smallest viewport then style up.

This will allow you to have a better css flow by being able to check it up as you go and minimize on style overrides.

example:

@media(min-width: 480px) {

}

@media(min-width: 767px) {

}

@media(min-width: 1024px) {

}

Upvotes: 1

Related Questions