Within my project, there is a basic div that serves as a navigation bar. Inside this div rests an image portraying a logo.
My goal is for the position of the logo to adjust every time the page width is altered.
I attempted using media queries for this purpose, but I suspect generating a new query each time the page width changes may not be the most efficient way to achieve this. Is there a more effective method?
Below is the code snippet in question:
HTML:
<div id="navBar">
<img src="{% static 'spotifyLogo.png' %}" alt="Image of the Spotify logo" id="spotifyLogoImage" width="197px" height="59px">
</div>
CSS:
#navBar {
border: 1px solid hsl(231, 12%, 89%);
width: 100%;
height: 104px;
}
#spotifyLogoImage {
position: relative;
margin-left: 854px;
margin-top: 23px;
}
ENTIRE NAVIGATION BAR CODE:
<div id="navBar">
<img src="{% static 'spotifyLogo.png' %}" alt="Image of the Spotify logo" id="spotifyLogoImage" width="195px" height="59px">
</div>
#navBar {
border: 1px solid hsl(231, 12%, 89%);
width: 100%;
height: 104px;
resize: both;
overflow: auto
}
#spotifyLogoImage {
position: relative;
float: right;
padding-right: 200px;
}