You are scaling your logo by width, and your links by height, since the nav bar just scrolls when you change the page height, there is no change in height for them to scale to. If you want them to respond the the browser window height instead of the div height, use height:2vh; (sets height to 2% of view height) instead.
Or you can just set their width instead of their height and they will act the same as your logo.
Solution 1 :
Problem :
I am currently putting together a Digital Brochure but while making the test page I am running into an annoying issue.
I have a fixed navbar that has image links on and a logo. I want to scale the images based on the navbar so I used percentages. The scaling on the Logo works, the links will not scale and remain in their native size.
I turned them into normal linkless images and they scaled correctly so it seems it’s only when I try to scale an image link.
Is there something I am missing here? Code attached below.
<html>
<head>
<a>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 20%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #055A8A;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 30%;
font-size: 28px;
padding: 0px 10px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style><title>Introduction</title>
</a>
</head><body>
<div class="sidenav">
<div style="text-align: center;"> <img style="width: 90%;" src="contentsimg/logo.png"></div>
<br>
<a href="index.html"><img style="height: 2%;" alt="INTRODUCTION" src="contentsimg/introduction.png"></a>
<br>
<a href="design.html"><img style="height: 2%;" alt="DESIGN" src="contentsimg/design.png"></a>
<br>
<a href="game.html"><img style="height: 2%;" alt="GAME" src="contentsimg/game.png"></a>
<br>
<a href="film.html"><img style="height: 2%;" alt="FILM" src="contentsimg/film.png"></a>
<br>
<a href="web.html"><img style="height: 2%;" alt="WEB" src="contentsimg/web.png"></a>
<br>
<a href="shortcourses.html"><img style="height: 2%;" alt="SHORT COURSES" src="contentsimg/shortcourses.png"></a>
<br>
<a href="testimonials.html"><img style="height: 2%;" alt="TESTIMONIALS" src="contentsimg/testimonials.png"></a>
<br>
<a href="finance.html"><img style="height: 2%;" alt="FINANCE" src="contentsimg/finance.png"></a>
</div>
<div style="margin-left: 333px; width: 697px;" class="main">
<h2 style="margin-left: 0px; width: 787px;"><img src="headingsimg/Introduction.png" alt="INTRODUCTION" style="width: 182px; height: 29px;"><br>
</h2>
<br>
</div>
</body>
</html>
Comments
Comment posted by Dante Lloyd
Thanks for your response. Do you mean adding a second
Comment posted by OakenDuck
You can ignore my previous comment, I was thinking you had a different problem. What’s going on is you are setting the styles inline in the image tags, and that’s overriding anything in your main style tag.That can make it easier to edit individual items, but it’s difficult to reproduce. Just get rid of the inline styles and set a selector called
Comment posted by Dante Lloyd
I have no idea why there is
Comment posted by OakenDuck
You don’t have to add any classes, just remove the inline styles and add the selector in the style tag.
Comment posted by Dante Lloyd
That seems to have fixed it. It wasn’t however, the fact I was scaling by height rather than width, as if I wasn’t using link tags, the images scaled fine when I was scaling in this way, I am scaling them by height to keep them uniform in relation to each other. That being said using the