[ad_1]
Asked
Viewed
11 times
I’m trying to make it so that when I zoom in/out the text in the bottom div is always relative to the size of the div.
This is how it looks now: Normal:
Zoomed in:
Zoomed out:
.bottom {
background-color: red;
width: 100%;
max-width: 3000px;
height: 10vh;
max-height: 200px;
margin: auto;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.navBottom{
overflow:visible;
display: flex;
justify-content: center;
max-height: 5vh;
}
.navBottom a {
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 1.8vh;
border-left: 1px solid;
border-right: 1px solid;
text-shadow: #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px;
}<div class="bottom">
<div class="navBottom">
<a href="https://stackoverflow.com/questions/72453681/menu/info.html">About</a>
<a href="menu/history.html">History</a>
</div>
</div>
9,7711 gold badge31 silver badges40 bronze badges
asked 4 mins ago
Symet2 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
Align Items will do that part for you.
.bottom {
background-color: red;
width: 100%;
max-width: 3000px;
height: 10vh;
max-height: 200px;
margin: auto;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
}
.navBottom{
overflow:visible;
display: flex;
justify-content: center;
max-height: 5vh;
align-items: center;
}
.navBottom a {
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 1.8vh;
border-left: 1px solid;
border-right: 1px solid;
text-shadow: #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px;
}<div class="bottom">
<div class="navBottom">
<a href="https://stackoverflow.com/questions/72453681/menu/info.html">About</a>
<a href="menu/history.html">History</a>
</div>
</div>
Not the answer you’re looking for? Browse other questions tagged html css or ask your own question.
lang-html
[ad_2]