My h tags and columns alignment become an issue as I shrink the screen size

April 12, 2023

I have become very frustrated using CSS in trying to fix one page’s section. Specifically, I have a section with a few h tags and some columns (sample shown below). I have tried many things with CSS, including:

centering the tags,
using ‘rem’ for the font-size, and
I’ve tried making the columns width a percentage of the viewport.

Ultimately, what I need is for the text to shrink when I change screen size, and the tags to stay positioned above the columns and remain centered; also – ideally – the columns would not wrap (but if they do then they should be centered)

<div class="encompasing-div-class">
  <h5>Small Tag</h5>
  <div class="row">
    <h3 class="mobile-only">column tag</h3>
    <div class="column">
      <ul>
        <li> things</li>
        <li> things </li>
      </ul>
    </div>
    <div class="column">
      <h3 class="mobile-only">column tag</h3>
      <ul>
        <li> more things </li>
        <li> more things </li>
      </ul>
    </div>

Any help would be greatly appreciated. I suck at this stuff but I’m trying my hardest. I’m sure someone will let me know if I left some information out. Thank you all.

Below, I have added an image of what my issue is so it is clear as can be.

>Solution :

Here’s an example.
I’ve moved one h3 tag into the .column div. I’ve used display:flex to position each column side by side. We use flex:1 to make the columns equal width (for an explanation why, see this article on css tricks).

To stop your text wrapping, I’ve set the text to white-space:nowrap (see MDN for details).

To get the text to grow and shrink to the screen size you can use viewport units but obviously if your screen is too large or too small you’ll end up with tiny or giant font sizes so we limit these using clamp() (again, CSS tricks has a good article on this). Annotated code below:

body {
  background-color: #222222;
  color: #fefefe;
}

.row {
  display: flex; /* make the column elements appear side by side using flexbox */
}
.column {
  white-space: nowrap;  /*stop the text from wrapping */
  flex: 1; /* make each column 50% of the parent */
  font-size: clamp(0.75rem, 4vw, 1.5rem); /* make the font size 4% of the viewport width but never go above 1.5rem or below 0.75rem */
}
.mobile-only {
  text-align: center; /* self-explanatory */
}

<div class="encompasing-div-class">
  <h5>Small Tag</h5>
  <div class="row">
    <!-- moved this below <h3 class="mobile-only">column tag</h3> -->
    <div class="column">
      <h3 class="mobile-only">column tag</h3>
      <ul>
        <li> things</li>
        <li> things </li>
      </ul>
    </div>
    <div class="column">
      <h3 class="mobile-only">column tag</h3>
      <ul>
        <li> more things </li>
        <li> more things </li>
      </ul>
    </div>
        <div class="column">
      <h3 class="mobile-only">column tag</h3>
      <ul>
        <li> more things </li>
        <li> more things </li>
      </ul>
    </div>
  </div>
</div>