БЛОГ НА HUSL


Как сдвинуть элементы в середину при @media screen

Автор вопроса: Kevlar

Помогите расположить элементы посередине при @media screen and (max-width: 1107px)? Есть блок с карточками, при уменьшении экрана ниже (@media screen and (max-width: 1108px)) последние карточки ведут себя не очень мне понятным образом. Помогите пожалуйста расставить карточки таким образом что бы все карточки распределялись равномерно по ширине и занимали всю отведённую им ширину?

.search__cards {
  margin: 25px 0;
}

.search__cards-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 2.5rem 0;
}

.search__cards-title {
  font-size: 2rem;
  font-weight: 700;
}

@media screen and (max-width: 426px) {
  .search__cards-title {
    font-size: 1.5rem;
  }
}

.search__cards-button {
  background-color: #0044ff;
  color: rgb(255, 255, 255);
  line-height: 3rem;
  height: 3rem;
  padding: 0 1.5rem;
  border-radius: 10px;
  /* text-transform: uppercase; */
  font-size: 2rem;
  /* font-weight: 700; */
}

.search__cards-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.9rem;
}

@media screen and (max-width: 1025px) {
  .search__cards-content {
    justify-content: flex-start;
    gap: 0.5rem;
  }
}

.search__cards-item {
  max-width: 14.3rem;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.08);
  background-color: #fff;
}

@media screen and (max-width: 1025px) {
  .search__cards-item {
    width: 31%;
    max-width: 100%;
  }
}

@media screen and (max-width: 769px) {
  .search__cards-item {
    width: 48%;
    max-width: 100%;
  }
}

@media screen and (max-width: 528px) {
  .search__cards-item {
    width: 100%;
    max-width: 100%;
  }
}

.search__cards-img {
  width: 100%;
  height: 13rem;
}

.search__cards-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search__cards-description {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0.6rem;
}

.search__cards-subtitle {
  font-size: 1.1rem;
  font-weight: 700;
  padding-left: 10px;
}

.search__cards-link {
  font-size: 12px;
  padding-right: 10px;
}

.scale {
  display: inline-block;
  overflow: hidden;
}

.scale img {
  transition: 1.5s;
  display: block;
}

.scale img:hover {
  transform: scale(1.2);
}
<div class="search__cards-content">
  <div class="search__cards-item">
    <div class="search__cards-img scale">
      <a href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQv9Nc1vr_cBW_frNDe8gnNTuTBbLVwcxBdcFh-y3-dTJpzeOrLbxMEcegIaF9-5lr8BMk&usqp=CAU" alt=""></a>
    </div>
    <div class="search__cards-description">
      <a class="search__cards-subtitle" href="#">Lorem</a>
      <a class="search__cards-link" href="#">View more →</a>
    </div>
  </div>

  <div class="search__cards-item">
    <div class="search__cards-img scale">
      <a href="#"><img src="https://images.unsplash.com/photo-1559297434-fae8a1916a79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8dHJhbnNwb3J0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt=""></a>
    </div>
    <div class="search__cards-description">
      <a class="search__cards-subtitle" href="#">Lorem</a>
      <a class="search__cards-link" href="#">View more →</a>
    </div>
  </div>

  <div class="search__cards-item">
    <div class="search__cards-img scale">
      <a href="#"><img src="https://images.unsplash.com/photo-1446694292248-2c2a7e575b1b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8dHJhbnNwb3J0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt=""></a>
    </div>
    <div class="search__cards-description">
      <a class="search__cards-subtitle" href="#">Lorem</a>
      <a class="search__cards-link" href="#">View more →</a>
    </div>
  </div>

  <div class="search__cards-item">
    <div class="search__cards-img scale">
      <a href="#"><img src="https://images.unsplash.com/photo-1488998628026-a1a79746cdcd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fHRyYW5zcG9ydHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60" alt=""></a>
    </div>
    <div class="search__cards-description">
      <a class="search__cards-subtitle" href="#">Lorem</a>
      <a class="search__cards-link" href="#">View more →</a>
    </div>
  </div>

  <div class="search__cards-item">
    <div class="search__cards-img scale">
      <a href="#"><img src="https://images.unsplash.com/photo-1614976523626-d598aafd4fda?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fHRyYW5zcG9ydHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60" alt=""></a>
    </div>
    <div class="search__cards-description">
      <a class="search__cards-subtitle" href="#">Lorem</a>
      <a class="search__cards-link" href="#">View more →</a>
    </div>
  </div>

  <!-- Second row -->
  <div class="search__cards-item">
    <div class="search__cards-img scale">
      <a href="#"><img src="https://images.unsplash.com/photo-1475088092121-b7d3cd6e1482?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHRyYW5zcG9ydHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60" alt=""></a>
    </div>
    <div class="search__cards-description">
      <a class="search__cards-subtitle" href="#">Lorem</a>
      <a class="search__cards-link" href="#">View more →</a>
    </div>
  </div>


  <div class="search__cards-item">
    <div class="search__cards-img scale">
      <a href="#"><img src="https://images.unsplash.com/photo-1604778202015-3071e0d7f29b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fHRyYW5zcG9ydHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60" alt=""></a>
    </div>
    <div class="search__cards-description">
      <a class="search__cards-subtitle" href="#">Lorem</a>
      <a class="search__cards-link" href="#">View more →</a>
    </div>
  </div>

  <div class="search__cards-item">
    <div class="search__cards-img scale">
      <a href="#"><img src="https://images.unsplash.com/photo-1592963219838-6045ccbe0563?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHRyYW5zcG9ydHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60" alt=""></a>
    </div>
    <div class="search__cards-description">
      <a class="search__cards-subtitle" href="#">Lorem</a>
      <a class="search__cards-link" href="#">View more →</a>
    </div>
  </div>

  <div class="search__cards-item sist1">
    <div class="search__cards-img scale">
      <a href="#"><img src="https://images.unsplash.com/photo-1580981433573-c5804ced20ad?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8bW9kZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60" alt=""></a>
    </div>
    <div class="search__cards-description">
      <a class="search__cards-subtitle" href="#">Lorem</a>
      <a class="search__cards-link" href="#">View more →</a>
    </div>
  </div>

  <div class="search__cards-item sist2">
    <div class="search__cards-img scale">
      <a href="#"><img src="https://images.unsplash.com/photo-1445264918150-66a2371142a2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjF8fHRyYW5zcG9ydHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60" alt=""></a>
    </div>
    <div class="search__cards-description">
      <a class="search__cards-subtitle" href="#">Lorem</a>
      <a class="search__cards-link" href="#">View more →</a>
    </div>
  </div>


</div>


Источник

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

Автор решения: Александр Сычёв

Немного переделал ответ, посмотрите пожалуйста, так верно?

.search__cards {
  margin: 25px 0;
}

.search__cards-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 2.5rem 0;
}

.search__cards-title {
  font-size: 2rem;
  font-weight: 700;
}

@media screen and (max-width: 426px) {
  .search__cards-title {
    font-size: 1.5rem;
  }
}

.search__cards-button {
  background-color: #0044ff;
  color: rgb(255, 255, 255);
  line-height: 3rem;
  height: 3rem;
  padding: 0 1.5rem;
  border-radius: 10px;
  /* text-transform: uppercase; */
  font-size: 2rem;
  /* font-weight: 700; */
}

.search__cards-content {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}

@media screen and (max-width: 1025px) {
  .search__cards-content {
    justify-content: center;
    gap: 0.5rem;
  }
}

.search__cards-item {
  width: 16rem;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.08);
  background-color: #fff;
}

@media screen and (max-width: 1025px) {
  .search__cards-item {
    width: 31%;
    max-width: 100%;
  }
}

@media screen and (max-width: 769px) {
  .search__cards-item {
    width: 48%;
    max-width: 100%;
  }
}

@media screen and (max-width: 528px) {
  .search__cards-item {
    width: 100%;
    max-width: 100%;
  }
}

.search__cards-img {
  width: 100%;
  height: 13rem;
}

.search__cards-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search__cards-description {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0.6rem;
}

.search__cards-subtitle {
  font-size: 1.1rem;
  font-weight: 700;
  padding-left: 10px;
}

.search__cards-link {
  font-size: 12px;
  padding-right: 10px;
}

.scale {
  display: inline-block;
  overflow: hidden;
}

.scale img {
  transition: 1.5s;
  display: block;
}

.scale img:hover {
  transform: scale(1.2);
}
<div class="search__cards-content">
  <div class="search__cards-item">
    <div class="search__cards-img scale">
      <a href="#"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQv9Nc1vr_cBW_frNDe8gnNTuTBbLVwcxBdcFh-y3-dTJpzeOrLbxMEcegIaF9-5lr8BMk&usqp=CAU" alt=""></a>
    </div>
    <div class="search__cards-description">
      <a class="search__cards-subtitle" href="#">Lorem</a>
      <a class="search__cards-link" href="#">View more →</a>
    </div>
  </div>

  <div class="search__cards-item">
    <div class="search__cards-img scale">
      <a href="#"><img src="https://images.unsplash.com/photo-1559297434-fae8a1916a79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8dHJhbnNwb3J0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt=""></a>
    </div>
    <div class="search__cards-description">
      <a class="search__cards-subtitle" href="#">Lorem</a>
      <a class="search__cards-link" href="#">View more →</a>
    </div>
  </div>

  <div class="search__cards-item">
    <div class="search__cards-img scale">
      <a href="#"><img src="https://images.unsplash.com/photo-1446694292248-2c2a7e575b1b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8dHJhbnNwb3J0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60" alt=""></a>
    </div>
    <div class="search__cards-description">
      <a class="search__cards-subtitle" href="#">Lorem</a>
      <a class="search__cards-link" href="#">View more →</a>
    </div>
  </div>

  <div class="search__cards-item">
    <div class="search__cards-img scale">
      <a href="#"><img src="https://images.unsplash.com/photo-1488998628026-a1a79746cdcd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fHRyYW5zcG9ydHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60" alt=""></a>
    </div>
    <div class="search__cards-description">
      <a class="search__cards-subtitle" href="#">Lorem</a>
      <a class="search__cards-link" href="#">View more →</a>
    </div>
  </div>

  <div class="search__cards-item">
    <div class="search__cards-img scale">
      <a href="#"><img src="https://images.unsplash.com/photo-1614976523626-d598aafd4fda?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fHRyYW5zcG9ydHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60" alt=""></a>
    </div>
    <div class="search__cards-description">
      <a class="search__cards-subtitle" href="#">Lorem</a>
      <a class="search__cards-link" href="#">View more →</a>
    </div>
  </div>

  <!-- Second row -->
  <div class="search__cards-item">
    <div class="search__cards-img scale">
      <a href="#"><img src="https://images.unsplash.com/photo-1475088092121-b7d3cd6e1482?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHRyYW5zcG9ydHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60" alt=""></a>
    </div>
    <div class="search__cards-description">
      <a class="search__cards-subtitle" href="#">Lorem</a>
      <a class="search__cards-link" href="#">View more →</a>
    </div>
  </div>


  <div class="search__cards-item">
    <div class="search__cards-img scale">
      <a href="#"><img src="https://images.unsplash.com/photo-1604778202015-3071e0d7f29b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fHRyYW5zcG9ydHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60" alt=""></a>
    </div>
    <div class="search__cards-description">
      <a class="search__cards-subtitle" href="#">Lorem</a>
      <a class="search__cards-link" href="#">View more →</a>
    </div>
  </div>

  <div class="search__cards-item">
    <div class="search__cards-img scale">
      <a href="#"><img src="https://images.unsplash.com/photo-1592963219838-6045ccbe0563?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHRyYW5zcG9ydHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60" alt=""></a>
    </div>
    <div class="search__cards-description">
      <a class="search__cards-subtitle" href="#">Lorem</a>
      <a class="search__cards-link" href="#">View more →</a>
    </div>
  </div>

  <div class="search__cards-item sist1">
    <div class="search__cards-img scale">
      <a href="#"><img src="https://images.unsplash.com/photo-1580981433573-c5804ced20ad?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8bW9kZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60" alt=""></a>
    </div>
    <div class="search__cards-description">
      <a class="search__cards-subtitle" href="#">Lorem</a>
      <a class="search__cards-link" href="#">View more →</a>
    </div>
  </div>

  <div class="search__cards-item sist2">
    <div class="search__cards-img scale">
      <a href="#"><img src="https://images.unsplash.com/photo-1445264918150-66a2371142a2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjF8fHRyYW5zcG9ydHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=600&q=60" alt=""></a>
    </div>
    <div class="search__cards-description">
      <a class="search__cards-subtitle" href="#">Lorem</a>
      <a class="search__cards-link" href="#">View more →</a>
    </div>
  </div>


</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.