-2

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: Normal

Zoomed in: Zoomed in

Zoomed out:

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="menu/info.html">About</a>
    <a href="menu/history.html">History</a>
  </div>
</div>

And even if the text is good, the borders are too big/small depending on the zoom.

Symet2
  • 1
  • 1

1 Answers1

0

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="menu/info.html">About</a>
    <a href="menu/history.html">History</a>
  </div>
</div>
Kameron
  • 10,240
  • 4
  • 13
  • 26
Crystal
  • 1,845
  • 2
  • 4
  • 16
  • Not really, I'm still getting the same problem when I'm zoomed in. – Symet2 May 31 '22 at 20:25
  • Thats interesting. did you try vertical-align:middle?. i grap your entire snippet seems like its working on align-items. i tried to zoom in and zzom it out as well seems align in the center. Let me know if vertical align wont work – Crystal Jun 01 '22 at 05:00