как сделать чтоб кнопка меняла свое положение пропорционально всему контенту при отзывчивой верстке?

Question

**на макетном разрешении 1280 x 721 px кнопка discover расположена правильно, но при изменении ширины экрана она располагается неправильно: **

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

.main-screen__clients-area {
  position: relative;
  width: 100%;
  /* display: flex;
     justify-content: space-between; */
}

.main-screen__clients {
  /* width: 30.78%; */
  float: left;
  width: 138px;
}

.main-screen__row-clients div:first-child {
  margin-bottom: 31px;
}

.main-screen__clients-title {
  color: #FFFFFF;
  opacity: 0.9;
  margin-bottom: 12px;
}

.main-screen__clients-subtitle {
  color: #FFFFFF;
  opacity: 0.5;
}

.main-screen__button {
  position: absolute;
  /* left: 28%;
            top: 31%; */
  left: 28.8%;
  right: 71.2%;
  top: 67.5%;
}

.main-screen__img-area {
  float: right;
  width: 62.2%;
  min-height: 221px;
  /* min-height: 284px; */
  background: url("../img/main-screne/item.png") no-repeat center center;
  background-size: 100% 100%;
}

<div class="main-screen__clients-area">
  <div class="main-screen__clients">
    <div class="main-screen__row-clients">
      <div class="main-screen__clients-column">
        <p class="main-screen__clients-title clients__title">
          100+
        </p>
        <p class="main-screen__clients-subtitle clients__subtitle">
          famous clients all over the world
        </p>
      </div>
      <div class="main-screen__clients-column">
        <p class="main-screen__clients-title clients__title">
          300+
        </p>
        <p class="main-screen__clients-subtitle clients__subtitle">
          years we help our clients to keep track of time
        </p>
      </div>
    </div>
    <!-- <div class="main-screen__row-clients"> -->

    <!-- </div> -->
  </div>
  <div class="main-screen__button button">
    <div class="main-screen__button-text button__text">
      discover
    </div>
    <div class="main-screen__button-img button__img">
      <img src="img/button/01.svg" alt="arrow">
    </div>
  </div>
  <div class="main-screen__img-area">
    <!-- <a href="#"><img src="img/main-screne/item.jpg" alt="watch" class="main-screen__img-item" width="396" height="221"></a> -->
  </div>
</div>

Answer 1

так логично же, у вас left:28% считает от .main-screen__clients-area, который имеет позиционирование relative, и который существенно большей ширины, чем белая картинка с часами, в углу которой вы хотите расположить скидку.

Оберните картинку и скидку вместе в в отдельный блок, задайте позиционирование relative, и в нем уже размещайте как надо скидку.

Что-то вроде этого:

.wrap-img {
  width: 300px;
  margin: 30px auto 0;
  position: relative;
 }
 .discount {
  position: absolute;
  z-index: 5;
  left: -30px;
  top: -30px;
  background: #f0f;
  color: #fff;
  border-radius: 50%;
  padding: 20px;
 }

<div class="wrap-img">
  <div class="discount">Скидка</div>
  <img src="http://placeimg.com/300/150/an" alt="">
</div>

БЛОГ НА HUSL

как сделать чтоб кнопка меняла свое положение пропорционально всему контенту при отзывчивой верстке?

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