Сделать раздел с абсолютными элементами отзывчивым - PullRequest
Новая
       11

Сделать раздел с абсолютными элементами отзывчивым

1 голос
/ 16 марта 2019

Я создаю адаптивный веб-сайт, и все в порядке, кроме одной вещи, которая является разделом обслуживания, который содержит некоторые элементы с абсолютным позиционированием, не отвечает.

То, что я хочу, это когда я уменьшаю ширину области просмотра, элементы немного сужаются и становятся ближе друг к другу, и в большом окне просмотра они расширяются, чтобы занять все доступное пространство.

Я пытался получить такое поведение с помощью медиазапросов, но я думаю, что это не оптимальное решение.

Вот фрагмент моего кода.

HTML 

  <section class="services">
    <img class="service-image" src="https://images.unsplash.com/photo-1474564862106-1f23d10b9d72?ixlib=rb-1.2.1&auto=format&fit=crop&w=1068&q=80" alt="">
    <h1 class="title-service">
      services
    </h1>
    <div class="quality-cuisine-box">
      <i class="fas fa-concierge-bell icon cuicon"></i>
      <h2 class="service-title">quality cuisine</h2>
      <p class="service-description">Le Lorem Ipsum est <br>
        simplement du faux
      </p>
    </div>
    <div class="freindly-staff-box">
      <i class="fas fa-smile-beam icon cuicon"></i>
      <h2 class="service-title">freindly staff</h2>
      <p class="service-description">Le Lorem Ipsum est <br>
        simplement du faux</p>
    </div>
    <div class="fresh-food-box">
      <i class="fas fa-fish icon cuicon"></i>
      <h2 class="service-title">fresh food</h2>
      <p class="service-description">Le Lorem Ipsum est <br>
        simplement du faux</p>
    </div>

  </section>

CSS 

   .service-image {
      max-width: 100%;
      width: 100vw;
      position: relative;
    }

    .services {
      position: relative;
    }

    .title-service {
      position: absolute;
      color: white;
      top: 0;
      width: 100%;
      text-align: center;
      font-family: Roboto;
    }

    .cuicon {
      display: block;
      text-align: center;
      font-size: 1.5rem;
    }

    .quality-cuisine-box {
      position: absolute;
      top: 2.25rem;
      color: white;
      font-family: roboto;
      font-size: 0.75rem;
    }

    .freindly-staff-box {
      position: absolute;
      color: white;
      font-family: roboto;
      font-size: 0.75rem;
      top: 2.25rem;
      left: 10rem;

    }

    .fresh-food-box {
      position: absolute;
      color: white;
      font-family: roboto;
      font-size: 0.75rem;
      top: 2.25rem;
      left: 19rem;
    }

Ответы [ 2 ]

1 голос
/ 16 марта 2019

Поместите изображение как абсолютное в порт вида покрытия и удалите абсолютное из всех других элементов. Или вы можете использовать display: flex, чтобы сделать ваш макет надежным. 

    .services {
      position: relative;
      overflow: hidden;
    }

    .quality-cuisine-box, .freindly-staff-box, .fresh-food-box {
      color: white;
      font-family: roboto;
      font-size: 0.75rem;
      float: left;
      width: 33%;
      vertical-align: middle;
    }
    .service-image {
      max-width: 100%;
      width: 100vw;
      position: absolute;
      z-index: -1;
    }
0 голосов
/ 16 марта 2019

попробуйте этот код: 

<section class="services">
<img class="service-image" src="https://images.unsplash.com/photo-1474564862106-1f23d10b9d72?ixlib=rb-1.2.1&auto=format&fit=crop&w=1068&q=80" alt="">

<div class="quality-cuisine-box">
  <i class="fas fa-concierge-bell icon cuicon"></i>
  <h2 class="service-title">quality cuisine</h2>
  <p class="service-description">Le Lorem Ipsum est <br>
    simplement du faux
  </p>
</div>
<div class="freindly-staff-box">
  <i class="fas fa-smile-beam icon cuicon"></i>
  <h2 class="service-title">freindly staff</h2>
  <p class="service-description">Le Lorem Ipsum est <br>
    simplement du faux</p>
</div>
<div class="fresh-food-box">
  <i class="fas fa-fish icon cuicon"></i>
  <h2 class="service-title">fresh food</h2>
  <p class="service-description">Le Lorem Ipsum est <br>
    simplement du faux</p>
</div>

и css: 

.service-image {
  max-width: 100%;
  width: 100vw;
  position: absolute;
  z-index: -1;
}

.services {
  width: 100vw;
 display: grid;
 grid-template-columns: auto auto auto;}

 .title-service {

  color: white;
  top: 0;
  width: 100%;
  text-align: center;
  font-family: Roboto;
}

.cuicon {
  display: block;
  text-align: center;
  font-size: 1.5rem;
}

.quality-cuisine-box {
  text-align: center;
  top: 2.25rem;
  color: white;
  font-family: roboto;
  font-size: 0.75rem;
}

.freindly-staff-box {
     text-align: center;
  color: white;
  font-family: roboto;
  font-size: 0.75rem;
  top: 2.25rem;
  left: 10rem;

}

.fresh-food-box {
  text-align: center;
  color: white;
  font-family: roboto;
  font-size: 0.75rem;
  top: 2.25rem;
  left: 19rem;
}

вместо top вы должны использовать padding-top для каждого поля

...