CSS: сохранение постоянной высоты абзаца при изменении размера браузера. - PullRequest
Новая
       93

CSS: сохранение постоянной высоты абзаца при изменении размера браузера.

0 голосов
/ 16 июня 2020

Я работаю над задачей Frontend Mentor и упираюсь в стену, пытаясь сделать дизайн должным образом отзывчивым. Я использую единицы просмотра для размера шрифта, и он отлично работает до тех пор, пока я поддерживаю постоянное соотношение окна браузера при изменении его размера. Если я опускаю окно, увеличивая высоту, текст расширяется по вертикали, и дизайн ломается. Установка другой высоты абзаца в медиа-запросе не работает. Контейнер для кнопок (которые абсолютно позиционированы) тоже отламывается. Я прочитал статью, в которой говорилось, что использование медиа-запросов для высот не рекомендуется, и я все равно не знаю, как это сделать. Я также не хочу устанавливать точку останова для мобильной версии, когда браузер слишком широк. Я установил точку останова на 1024 пикселя, что уменьшает размер шрифта до 2vh, прежде чем он попадет в точку останова на мобильном устройстве.

Это так расстраивает. Я знаю, что, вероятно, это что-то очевидное, чего я не вижу, и мне действительно нужна помощь, потому что это истощает мою волю к жизни, а я еще даже не начал работать с javascript. Спасибо!

Вот скриншот дизайна, разбитого на 695px x 871px 

   * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-size: 32px;
  line-height: 1.5;
}

.main-container {
  max-width: 1440px;
  height: 100vh;
  margin: 0 auto;

  /* border: 1px solid red; */
}

/* ------- SLIDES UL ------- */
.slides {
  position: relative;

  /* border: 1px solid red; */
}

.slides li {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70%;
  margin: 0 auto;
  padding-bottom: 4%;
  background: no-repeat bottom left/50% url("images/pattern-curve.svg");

  /* border: 1px solid red; */
}

.hidden {
  display: none !important;
}

/* ------- QUOTE ------- */
.slide-quote {
  font-size: 2.5vh;
  font-weight: 300;
  color: var(--dark-blue);
  max-width: 45%;
  max-height: 20%;
  padding-top: 5%;
  background: no-repeat top 0 left 15%/20% url("images/pattern-quotes.svg");
  transform: translateX(25%); /* Pushes text to the right */
  z-index: 1;

  /* border: 1px solid red; */
}

.name,
.job_title {
  font-size: 2vh;
}

.name {
  display: inline-block;
  margin-top: 5%;
  font-weight: 500;
}

.job_title {
  color: var(--gray-blue);
}

/* ------- IMAGES ------- */
.img-wrapper {
  position: relative;
  width: 50%;
  height: 50%;
  margin-top: 2%;
  padding: 8% 6% 6% 6%;
  background: no-repeat center/100% url("images/pattern-bg.svg");

  /* border: 1px solid red; */
}

.slide-image {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
  box-shadow: -4px 13px 19px 1px rgba(0, 0, 0, 0.3);
}

/* ------- BUTTONS ------- */
.btn-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  top: 75%;
  left: 55%;
  width: 6%;
  height: 7%;
  background: #fff;
  border-radius: 50px;

  /* border: 1px solid red; */
}

button {
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
}

button img {
  width: 10px;
  height: 10px;
}
<body>
    <div class="main-container">
      <ul class="slides">
        <li class="hidden">
          <p class="slide-quote ">
            “ I’ve been interested in coding for a while but never taken the
            jump, until now. I couldn’t recommend this course enough. I’m
            now in the job of my dreams and so excited about the future. ”
          </br>
            <span class="name">Tanya Sinclair</span>
            <span class="job_title">UX Engineer</span>
          </p>
       <div class="img-wrapper">
        <img src="images/image-tanya.jpg" class="slide-image" alt="" />
      </div>
     </li>

     <li >
       <p class="slide-quote">
         “ If you want to lay the best foundation possible I’d recommend
         taking this course. The depth the instructors go into is
         incredible. I now feel so confident about starting up as a
         professional developer. ”
       </br>
         <span class="name">John Tarkpor</span>
         <span class="job_title">Junior Front-end Developer</span>
       </p>
       <div class="img-wrapper">
         <img src="images/image-john.jpg" class="slide-image" alt="" />
       </div>
     </li>
       
     <!-- Buttons -->
   <div class="btn-wrapper">
    <button><img src="images/icon-prev.svg" alt="" /></button>
    <button><img src="images/icon-next.svg" alt="" /></button>
  </div>
         
</ul>
...