Как сделать чтоб при уменьшении масштаба объекты только уменьшались, а не увеличивали расстояние между собой

Question

@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Caption:wght@400;700&display=swap');
body {
  background-color: #2B2A33;
  font-family: 'PT Sans Caption', sans-serif;
  color: white;
}

.flfl {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  box-sizing: border-box;
  padding-top: 10%;
  margin-right: 1;
}

.fl {
  width: 50%;
  font-size: 50;
  align-items: center;
}

.p {
  font-size: 20;
  margin: 0;
}

.h1 {
  margin: 0;
  line-height: 1;
  margin-bottom: 30px;
}

.btn {
  text-decoration: none;
  color: white;
  background-color: #32303A;
  padding: 2% 20%;
  font-weight: 700;
  font-size: 70;
  margin-top: 30%;
  border: none;
  transition: 0.1s;
  border-radius: 100px;
}

.btn:hover {
  background-color: #43404E;
}

.bg {
  background-color: #32303A;
  height: 70%;
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
  width: 45%;
  position: absolute;
  align-items: center;
  right: 0;
}

.faser {
  position: absolute;
  right: 100;
  animation-name: faser;
}

<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>сайт</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="flfl">
    <div class="fl">
      <h1 class="h1">программа<br></h1>
      <p class="p"> это обединение лучших ресурстаков, ферм, датапаков и оптимизации для майнкрафта</p>
      <a href="#"><button class="btn">Скачать</button></a>

    </div>

    <div class="bg"></div>
    <img src="./files/" alt="" style="position:absolute ;right:0;">
  </div>


</body>

</html>

Answer 1

Можно использовать max-width и max-height. Кроме того медиа-запросами можно задать ширину и высоту блоков по достижении того или иного размера экрана.

БЛОГ НА HUSL

Как сделать чтоб при уменьшении масштаба объекты только уменьшались, а не увеличивали расстояние между собой

Ответы (1 шт):