why max-width in media query is not working-CodePudding

I wrote this piece of code but it's not working

@media (max-width: 767px){ .navbar-brand { padding-top: 10px; height: 80px; } .navbar-brand h1{ padding-top: 10px; font-size: 5vw; } .navbar-brand p { font-size: .6em; margin-top: 12px; } .navbar-brand p img { height: 20px ; } #collapsable-nav a { font-size: 1.2em; } #collapsable-nav a span{ font-size: 1em; } }

with this code i want to change my navbar when the screen is smaller than 767px but it doesn't work at all

CodePudding user response：

use min-width instead of using max-width

@media (min-width: 767px) {
      .navbar-brand {
        padding-top: 10px;
        height: 80px;
      }
      .navbar-brand h1{
        padding-top: 10px;
        font-size: 5vw;
      }
      .navbar-brand p {
        font-size: .6em;
        margin-top: 12px;
      }
      .navbar-brand p img {
        height: 20px;
      }
      #collapsable-nav a {
        font-size: 1.2em;
      }
      #collapsable-nav a span{
        font-size: 1em;
      }
    }

Visit the following link to understand more about min-widht in css: https://www.w3schools.com/cssref/playdemo.php?filename=playcss_min-width

CodePudding user response：

You should probably use min-width for your media query in this case. Please read how to ask a proper question and update your question so we can better help you?