Header text overlapping on wrap

Question

Trying to make my first grid website, and everything is going well, but for some reason the Header text is crowded in a smaller browser.

I've tried playing with padding/margins of different elements. tried adding line heights, deleting flex properties, nothing has worked.

I want my showcase h1 to have proper line spacing.

body {
  background: var(--primary);
  margin: 30px 50px;
  line-height: 1.6rem;
}

img {
  max-width: 100%;
}

.wrapper {
  display: grid;
  grid-gap: 1.2rem;
}

.main-nav ul {
  display: grid;
  grid-gap: 1.3rem;
  grid-template-columns: repeat(4, 1fr);
  padding: 0;
  list-style: none;
}

.main-nav a {
  background: var(--dark);
  display: block;
  text-decoration: none;
  padding: 0.8rem;
  color: var(--primary);
  text-transform: uppercase;
  font-size: 1.1rem;
  box-shadow: var(--shadow);
  text-align: center;
}

.btn {
  color: var(--primary);
  background: var(--dark);
  padding: 0.6rem 1.3rem;
  text-decoration: none;
  border: 0;
  box-shadow: var(--shadow);
}

.main-nav a:hover {
  background: var(--primary);
  color: var(--dark);
}

.top-container {
  display: grid;
  grid-gap: 1.2rem;
  grid-template-areas: 'showcase showcase top-box-a' 'showcase showcase top-box-b';
}

.showcase {
  grid-area: showcase;
  min-height: 400px;
  background: url("https://source.unsplash.com/random");
  background-size: cover;
  background-position: center;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  color: black;
  box-shadow: var(--shadow);
}

.showcase h1 {
  font-size: 4rem;
  margin-bottom: 0.5rem;
}

.showcase p {
  font-size: 1.3rem;
  margin-top: 0;
}

.top-box {
  background: #545454;
  color: var(--primary);
  padding: 1.5rem;
  text-align: center;
  align-items: center;
  box-shadow: var(--shadow);
  justify-items: center;
}

.top-box .price {
  font-size: 1.4rem;
}

.top-box-a {
  grid-area: top-box-a;
}

.top-box-b {
  grid-area: top-box-b;
}

.boxes {
  display: grid;
  grid-gap: 1.3rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.box {
  background: var(--dark);
  color: var(--primary);
  text-align: center;
  padding: 1.5rem 2rem;
  box-shadow: var(--shadow);
}

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<!-- Wrapper Begins-->
<div class="wrapper">
  <nav class="main-nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Gallery</a></li>
    </ul>
  </nav>
  <section class="top-container">
    <header class="showcase">
      <h1>Victors Tree Service</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua!
      </p>
      <a href="#" class="btn">Read More</a>
    </header>
    <div class="top-box top-box-a">
      <h2>Routine Services</h2>
      <p class="price">Starting at $199</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p>
    </div>
    <div class="top-box top-box-b">
      <h2>Tree Removal</h2>
      <p class="price">From $299 - $799</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p>
    </div>
  </section>
  <section class="boxes">
    <div class="box">
      <i class="fas fa-tree fa-4x"></i>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>
    <div class="box">
      <i class="fas fa-tools fa-4x"></i>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>
    <div class="box">
      <i class="fas fa-users fa-4x"></i>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>
    <div class="box">
      <i class="fas fa-clock fa-4x"></i>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>
  </section>
  <section class="info">
    <img src="https://source.unsplash.com/random">
    <div>
      <h2>Over 20 Years Experience</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </section>
  <section class="portfolio">
    <img src="https://source.unsplash.com/random/200x200">
    <img src="https://source.unsplash.com/random/200x201">
    <img src="https://source.unsplash.com/random/200x202">
    <img src="https://source.unsplash.com/random/200x203">
    <img src="https://source.unsplash.com/random/200x204">
    <img src="https://source.unsplash.com/random/200x205">
    <img src="https://source.unsplash.com/random/200x206">
    <img src="https://source.unsplash.com/random/200x207">
    <img src="https://source.unsplash.com/random/200x208">
  </section>
  <footer>Victor's Tree Service &copy 2019</footer>
</div>
<!--Wrapper Ends -->

Michael Benjamin · Accepted Answer · 2019-01-04T02:38:49.120

This is not a grid or flex or padding / margin issue. It's a line-height issue.

In particular, the problem is line-height: 1.6rem set on the body element.

The line-height property sets the minimum height of line boxes, where inline elements, such as text, exist.

A typical default value in most browsers is 1.2 (MDN) – notice the unitless value; more on that later.

In addition, the line-height property is inheritable (MDN), which means that elements down the HTML structure take the value you've set higher up.

Since you haven't defined a line-height value anywhere below the body element, that setting applies throughout your document.

So here's the problem:

You've set your h1 to 4rem.

But a 1.6rem line height cannot accommodate that size.

(4 * 16px) > (1.6 * 16px)

Here's your layout in normal desktop mode:

Notice how the heading is already exceeding the boundaries of the line box.

Because of this short line height, the text overlaps on wrap (as on smaller screens):

The solution, believe it or not, is simply to remove the unit of length from the line-height value.

So instead of line-height: 1.6rem, use line-height: 1.6.

You may even want to consider using the 1.2 default value (in which case, you can omit the line-height rule altogether).

The reason this works is as follows:

When you use line-height: 1.6rem, the line box height is calculated based on the root element's font size. In your case, that happens to be 16px (the browser's default value).

line box height: 1.6 * 16px = 25.6px

   h1 font size: 4.0 * 16px = 64.0px

That's how the h1 exceeds the height of the line box.

But with line-height: 1.6, the line box height is calculated based on the size of the font itself.

line box height: 1.6 * (4 * 16px) = 102.4px

   h1 font size: 4.0 * 16px = 64.0px

That's how the line box exceeds the height of the h1.

It's also why it makes sense to use unitless values in the line-height property.

See the spec for references and more details:

10.8 Line height calculations: the line-height and vertical-align properties

Perfect thank you, I ended up figuring this out, but your explanation is incredibly helpful in understanding why. — Adag89, Jan 04 '19 at 01:59
To be more accurate, the line-height applied to the container (body here) define the minimum height of line-box and the line-height applied to text element define the height. But as you said and due to inheritance both can be *merged* to only one but if we only change the line-height of the elements and we keep the one of the body it will also work (https://stackoverflow.com/a/54342051/8620333) — Temani Afif, Feb 18 '19 at 13:38

Pawan Kumar · Answer 2 · 2019-01-21T21:31:04.473

Use media query for responsiveness and it should be written at the end of the css so that css properties written under media query will not get override with any other css properties.

@media screen and (max-width: 600px) {
  .main-nav a {
    text-align: center;
    float: none;
  }
}

Instead of display:grid, use display:block so that it will take entire space and use float:left so that all the elements will be positioned to the left of the container.

body {
  background: var(--primary);
  margin: 30px 50px;
  line-height: 1.6rem;
}

img {
  max-width: 100%;
}

.wrapper {
  display: grid;
  grid-gap: 1.2rem;
}

.main-nav ul {
  display: block;
  padding: 0;
  list-style: none;
}

.main-nav a {
  background: var(--dark);
  display: block;
  text-decoration: none;
  margin: 0.8rem;
  /*use margin instead of padding so that it will be clickable only on the element*/
  color: var(--primary);
  text-transform: uppercase;
  font-size: 1.1rem;
  box-shadow: var(--shadow);
  text-align: center;
  float: left;
  border: 1px solid red;
  /*just to highlight the clickable el*/
}

.btn {
  color: var(--primary);
  background: var(--dark);
  padding: 0.6rem 1.3rem;
  text-decoration: none;
  border: 0;
  box-shadow: var(--shadow);
}

.main-nav a:hover {
  background: var(--primary);
  color: var(--dark);
}

.top-container {
  display: grid;
  grid-gap: 1.2rem;
  grid-template-areas: 'showcase showcase top-box-a' 'showcase showcase top-box-b';
}

.showcase {
  grid-area: showcase;
  min-height: 400px;
  background: url("https://source.unsplash.com/random");
  background-size: cover;
  background-position: center;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  color: black;
  box-shadow: var(--shadow);
}

.showcase h1 {
  font-size: 4rem;
  margin-bottom: 0.5rem;
}

.showcase p {
  font-size: 1.3rem;
  margin-top: 0;
}

.top-box {
  background: #545454;
  color: var(--primary);
  padding: 1.5rem;
  text-align: center;
  align-items: center;
  box-shadow: var(--shadow);
  justify-items: center;
}

.top-box .price {
  font-size: 1.4rem;
}

.top-box-a {
  grid-area: top-box-a;
}

.top-box-b {
  grid-area: top-box-b;
}

.boxes {
  display: grid;
  grid-gap: 1.3rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.box {
  background: var(--dark);
  color: var(--primary);
  text-align: center;
  padding: 1.5rem 2rem;
  box-shadow: var(--shadow);
}

@media screen and (max-width: 600px) {
  .main-nav a {
    text-align: center;
    float: none;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Victors Tree Service</title>
  <link rel="stylesheet" type="text/css" href="C:\Users\geek\Desktop\Experimental\styles.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384- 
    UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>

<body>
  <!-- Wrapper Begins-->
  <div class="wrapper">
    <nav class="main-nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Gallery</a></li>
      </ul>
    </nav>
    <section class="top-container">
      <header class="showcase">
        <h1>Victors Tree Service</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua!
        </p>
        <a href="#" class="btn">Read More</a>
      </header>
      <div class="top-box top-box-a">
        <h2>Routine Services</h2>
        <p class="price">Starting at $199</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
      </div>
      <div class="top-box top-box-b">
        <h2>Tree Removal</h2>
        <p class="price">From $299 - $799</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
      </div>
    </section>
    <section class="boxes">
      <div class="box">
        <i class="fas fa-tree fa-4x"></i>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
      <div class="box">
        <i class="fas fa-tools fa-4x"></i>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
      <div class="box">
        <i class="fas fa-users fa-4x"></i>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
      <div class="box">
        <i class="fas fa-clock fa-4x"></i>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
    </section>
    <section class="info">
      <img src="https://source.unsplash.com/random">
      <div>
        <h2>Over 20 Years Experience</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </section>
    <section class="portfolio">
      <img src="https://source.unsplash.com/random/200x200">
      <img src="https://source.unsplash.com/random/200x201">
      <img src="https://source.unsplash.com/random/200x202">
      <img src="https://source.unsplash.com/random/200x203">
      <img src="https://source.unsplash.com/random/200x204">
      <img src="https://source.unsplash.com/random/200x205">
      <img src="https://source.unsplash.com/random/200x206">
      <img src="https://source.unsplash.com/random/200x207">
      <img src="https://source.unsplash.com/random/200x208">
    </section>
    <footer>Victor's Tree Service &copy 2019</footer>
  </div>
  <!--Wrapper Ends -->
</body>

</html>

Header text overlapping on wrap

2 Answers2