Как сделать этот раздел отзывчивым - PullRequest
Новая
       6

Как сделать этот раздел отзывчивым

0 голосов
/ 20 апреля 2019

Image Section

Привет всем, Как мне сделать этот раздел отзывчивым на 768px 

.AppleContent {
    background-color: #9ACD32;
    text-align: center;
    padding: 50px 200px;
    color: white;
}
<section class="section-1">
        <div class="AppleContent">
            <i class="fas fa-apple-alt fa-3x"></i>
            <h3 class="font-weight">Completely synergize resource taxing relationships</h3>
            <p id="secondparagraph">Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.</p>
        </div>
</section>

1 Ответ

0 голосов
/ 20 апреля 2019

Вы задали абсолютные значения для отступа padding: 50px 200px; ... поэтому при переходе к меньшим размерам содержимое выглядит не так;

Чтобы получить точный вид, который вы ищете, попробуйте дать ему относительные значения (вместо абсолютных значений). Процент, подобный padding: 5% 10%; или как l, был сделан ниже (относительно высоты просмотра и ширины просмотра) ...

Ниже приведен пример кода 

.AppleContent {
  background-color: #9ACD32;
  text-align: center;
  padding: 10vh 20vw;
  color: white;
}
<section class="section-1">
  <div class="AppleContent">
    <i class="fas fa-apple-alt fa-3x"></i>
    <h3 class="font-weight">Completely synergize resource taxing relationships</h3>
    <p id="secondparagraph">Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.</p>
  </div>
</section>
...