Reputation: 33
Whenever the screen size increases the row height changes and the logo exceeds the height of the navbar. I'm stuck here and can really use some help
HTML
<div class="container">
<div class="navbar">
<div class="logo-desktop">
<img src="E:\work\JensonWebsite\images\jenson-logo-desktop.svg" />
</div>
</div>
<div class="slider"></div>
<div class="gallery"></div>
<div class="brands"></div>
<div class="contact"></div>
<div class="footer"></div>
</div>
CSS
.container {
height: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(12, 1fr);
}
.navbar {
display: grid;
padding: 6px;
background-color: #0E1848;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 100px;
align-items: center;
justify-content: center;
}
Upvotes: 1
Views: 1519
Reputation: 914
If you want the image to change height according to the row then add css something like this:
img {
width: 80%;
height: 100%;
}
But if you want fixed image then use fixed height and width like:
img {
width: 200px;
height: 60px;
}
Upvotes: 1