Перекрытие текста заголовка при переносе

Question

Пытаюсь сделать мой первый грид-сайт, и все идет хорошо, но по какой-то причине текст заголовка переполнен в меньшем браузере.

Я пробовал играть с отступами / полями различных элементов.попытался добавить высоту строк, удалить свойства flex, ничего не получилось.

Я хочу, чтобы в моей витрине h1 был правильный межстрочный интервал.

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

Answer 1

Это не проблема сетки, изгиба или отступа / отступа.Это line-height проблема.

В частности, проблема line-height: 1.6rem установлена ​​на элементе body.

line-height*Свойство 1012 * устанавливает минимальную высоту линейных блоков, в которых существуют встроенные элементы, такие как текст.

Типичное значение по умолчанию в большинстве браузеров составляет 1,2 ( MDN ) - обратите внимание на значение без единиц измерения;подробнее об этом позже .

Кроме того, свойство line-height является наследуемым ( MDN ), что означает, что элементы в структуре HTML принимают значение, которое вы установили вышеup.

Поскольку вы не определили значение line-height нигде ниже элемента body, этот параметр применяется ко всему документу.

Итак, вот проблема:

Вы установили h1 на 4rem.

Но высота строки 1.6rem не может соответствовать этому размеру.

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

Вот ваш макетв обычном режиме рабочего стола:

Обратите внимание, что заголовок уже выходит за границы строки строки.

Из-за этого короткоговысота строки, текст накладывается на перенос (как на маленьких экранах):

Решение , хотите верьте, хотите нет,просто удалить единицу длины из значения line-height.

Поэтому вместо line-height: 1.6rem используйте line-height: 1.6.

Возможно, вы даже захотите использовать значение по умолчанию 1.2 (в этом случае вы можете вообще опустить правило line-height).

Причина, по которой это работает следующим образом:

При использовании line-height: 1.6rem высота строки строки вычисляется на основе размера шрифта корневого элемента .В вашем случае это 16px (значение по умолчанию в браузере).

line box height: 1.6 * 16px = 25.6px

   h1 font size: 4.0 * 16px = 64.0px

Вот так h1 превышает высоту строки.

Но с line-height: 1.6высота строки строки вычисляется на основе размера самого шрифта .

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

   h1 font size: 4.0 * 16px = 64.0px

Вот так строковый блок превышает высоту h1.

Также имеет смысл использовать безразмерные значения в свойстве line-height.

См. Спецификацию для справок и более подробной информации:

• 10.8 Расчеты высоты линии: свойства line-height и vertical-align

Answer 2

Используйте media запрос на отзывчивость, и он должен быть записан в конце css, чтобы свойства css, записанные в медиазапросе, не переопределялись с другими свойствами css.

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

Вместоdisplay:grid, используйте display:block, чтобы он занимал все пространство, и используйте float:left, чтобы все элементы были расположены слева от контейнера.

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>