J. Koh J. Koh - 6 months ago 20
HTML Question

How do i keep my text still when minimize browser tab?

I tried creating a container with text. However my text kept getting squeeze when i minimize my browser tab. How do i make the text remain the same even when minimized?



<!DOCTYPE html>
<html>

<head>
<title>Savana - About</title>
<meta charset="utf-8" />
<style>
body {
font-family: 'Open sans', sans-serif;
}
.container-a {
width: 100%;
height: 400px;
background-color: #ffd800;
}
.container-a h1 {
margin: 0;
text-align: center;
position: relative;
top: 100px;
}
</style>

<body>
<div class="container-a">
<h1>
impeccable craftsmanship<br />
ridiculously comfy shoes<br /> transformative impact
</h1>
</div>
</body>

</html>




Answer

The container is re-sizing as you adjust the window. You can help prevent this a few ways, for example like adding a min-width to your container so when it hits a certain size it will no longer get smaller.

<!DOCTYPE html>
<html>

<head>
  <title>Savana - About</title>
  <meta charset="utf-8" />
  <style>
    body {
      font-family: 'Open sans', sans-serif;
    }
    .container-a {
      width: 100%;
      height: 400px;
      background-color: #ffd800;
      /* Added min width for your container here */
      min-width: 950px;
    }
    .container-a h1 {
      margin: 0;
      text-align: center;
      position: relative;
      top: 100px;
    }
  </style>

  <body>
    <div class="container-a">
      <h1>
            impeccable craftsmanship<br />
            ridiculously comfy shoes<br /> transformative impact
        </h1>
    </div>
  </body>

</html>