html {
height: 100%;
width: 100%;
}
Here, I divided 3 parts and added the media query.
@media screen and (min-width:768px) and (max-width:1023px) {
.logo {
max-width: 100rem;
}
}
@media screen and (min-width:480px) and (max-width:767px) {
.logo {
max-width: 50rem;
}
}
@media screen and (max-width:479px) {
.logo {
max-width: 30rem;
}
}
<body>
<div class="logo">
<nav class="navbar bg-transparent">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKv8GfX7rnmHMyXoAevE0ErR9XLJn-WQYybg&usqp=CAU" alt="Bootstrap">
</a>
</div>
</nav>
</div>
</body>
I tried to add the media query for resizing the logo of the web with Bootstrap. But it isn't work well, the size never change here.
You're setting a max-size in the
.logoclass, which gets applied correctly, but has no visual impact on the site as it affects the containing div. If you inspect your site with the dev tools of your browser, you can inspect thediv.logoelement and see how the size changes.If you want to resize the logo, add the
logoclass to the<img>tag.