0

Есть div со свойством flex, внутри еще 4 div'а с контентом(текст) по вертикали и по центру. Как сделать, чтобы при масштабировании div'ы с контентом сжимались, а родитель не растягивался по высоте?

.sliderContent {
  clear: both;
  height: 550px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  border: 1px solid black;
}

.sliderContent-upperText {
  width: fit-content;
  color: #000;
  font-family: "Roboto Condensed";
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.18px;
}

.sliderContent-dash {
  width: 80px;
  height: 2px;
  background-color: #000;
  margin-top: 16px;
}

.sliderContent-middleText {
  width: fit-content;
  color: #ffffff;
  font-family: Poppins;
  font-size: 60px;
  font-weight: 500;
  letter-spacing: 0.6px;
  line-height: 60px;
  margin-top: 74px;
}

.sliderContent-shortcuts {
  display: flex;
  width: fit-content;
  margin-top: 64px;
}

.sliderContent-shortcuts-round {
  margin: auto 6px;
  text-align: center;
  line-height: 40px;
  width: 40px;
  height: 40px;
  border: 2px solid #ffffff;
  border-radius: 50%;
}
<div class="sliderContent">
  <div class="sliderContent-upperText">Nunc eget nibh</div>
  <div class="sliderContent-dash"></div>
  <div class="sliderContent-middleText">Morbi in nisl auctor</div>
  <div class="sliderContent-shortcuts">
    <div class="sliderContent-shortcuts-round">
      <img src="images/facebook-logo.png" alt="face">
    </div>
    <div class="sliderContent-shortcuts-round">
      <img src="images/twitter-logo.png" alt="twit">
    </div>
    <div class="sliderContent-shortcuts-round">
      <img src="images/wifi-logo.png" alt="wifi">
    </div>
    <div class="sliderContent-shortcuts-round">
      <img src="images/vk-logo.png" alt="vk">
    </div>
  </div>
</div>

3
  • добавил код в вопрос 19 июн 2020 в 8:23
  • 1
    Текст так просто сжиматься не будет. Нужно либо с помощью медиа-запросов уменьшать размер шрифта (чтобы текст оставался в одной строке и не переносился), либо делать текст на svg 19 июн 2020 в 8:33
  • спасибо - понял) 19 июн 2020 в 8:37

1 ответ 1

0

Еще можно с помощью калькуляции сделать резиновый шрифт пример: calc(10px + 0.5vw)

1
  • 1
    и как это должно работать применительно к заданному вопросу? 19 июн 2020 в 9:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.