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;
}
}
I want to change my navbar
when the screen is smaller than 767px but it doesn't work at all.
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
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?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.