Карточка сжимается, а не складывается - PullRequest
Новая
       3

Карточка сжимается, а не складывается

1 голос
/ 12 июля 2020

У меня есть несколько карточек следующего вида:

web

The problem is that on mobile, they shrink, and they don't pile up as expected. How is it possible to fix this?

This is the CSS:

.card__like {
    width: 18px;
}

.card__clock {
    width: 15px;
  vertical-align: middle;
    fill: #AD7D52;
}
.card__time {
    font-size: 12px;
    color: #AD7D52;
    vertical-align: middle;
    margin-left: 5px;
}

.card__clock-info {
    float: right;
}

.card__img {
  visibility: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 235px;
  border-top-left-radius: 12px;
border-top-right-radius: 12px;
  
}

.card__info-hover {
    position: absolute;
    padding: 16px;
  width: 100%;
  opacity: 0;
  top: 0;
}

.card__img--hover {
  transition: 0.2s all ease-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
  position: absolute;
    height: 235px;
  border-top-left-radius: 12px;
border-top-right-radius: 12px;
top: 0;
  
}
.card-homework {
  margin-right: 25px;
  margin-bottom: 25px;
  transition: all .4s cubic-bezier(0.175, 0.885, 0, 1);
  background-color: var(--bg);
    width: 33.3%;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0px 13px 10px -7px rgba(0, 0, 0,0.1);
}
.card-homework:hover {
  box-shadow: 0px 30px 18px -8px rgba(0, 0, 0,0.1);
    transform: scale(1.10, 1.10);
}

.card__info {
z-index: 2;
  background-color: var(--bg);
  border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
   padding: 16px 24px 24px 24px;
}

.card__category {
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 500;
  color: #868686;
}

.card__title {
    margin-top: 5px;
    color: var(--text);
    margin-bottom: 10px;
    font-family: 'Roboto Slab', serif;
}

.card__by {
    font-size: 12px;
    color: var(--text);
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
}

.card__author {
    font-weight: 600;
    text-decoration: none;
    color: #AD7D52;
}

.card-homework:hover .card__img--hover {
    height: 100%;
    opacity: 0.3;
}

.card-homework:hover .card__info {
    background-color: transparent;
    position: relative;
}

.card-homework:hover .card__info-hover {
    opacity: 1;
}

I know the code is long, but I'm pretty sure the issue is in the .card-homework block. I've no clue on how to make these go on top of each other, because usually, the CSS frameworks have this included.

HTML:

 @foreach ($ homeworks как $ homework) .card - {{$ homework-> id}}. card__img, .card - {{$ homework-> id}} .card__img - hover {background-image: url ('{{asset (' storage / '. $ homework-> image)}}'); }  @if ($ homework-> выполнено == true)   @else     @endif  id) }}" class="card_link">   Домашнее задание  {{$ homework-> title}}  крайний срок:  {{Carbon \ Carbon :: parse ($ homework-> duedate) -> format ('dm-Y')}}    @endforeach

мобильный

1 Ответ

1 голос
/ 13 июля 2020

width: 33.3% заставляет карты оставаться в одном ряду и уменьшаться. Вы можете установить значение 100% только для экрана мобильного устройства. 

@media (max-width: 768px) {
  .card-homework {
    width: 100%;
  }
}


.card__like {
  width: 18px;
}

.card__clock {
  width: 15px;
  vertical-align: middle;
  fill: #AD7D52;
}

.card__time {
  font-size: 12px;
  color: #AD7D52;
  vertical-align: middle;
  margin-left: 5px;
}

.card__clock-info {
  float: right;
}

.card__img {
  visibility: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 235px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.card__info-hover {
  position: absolute;
  padding: 16px;
  width: 100%;
  opacity: 0;
  top: 0;
}

.card__img--hover {
  transition: 0.2s all ease-out;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  position: absolute;
  height: 235px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  top: 0;
}

.card-homework {
  margin-right: 25px;
  margin-bottom: 25px;
  transition: all .4s cubic-bezier(0.175, 0.885, 0, 1);
  background-color: var(--bg);
  width: 33.3%;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0px 13px 10px -7px rgba(0, 0, 0, 0.1);
}


/* Additional code */

@media (max-width: 768px) {
  .card-homework {
    width: 100%;
  }
}

.card-homework:hover {
  box-shadow: 0px 30px 18px -8px rgba(0, 0, 0, 0.1);
  transform: scale(1.10, 1.10);
}

.card__info {
  z-index: 2;
  background-color: var(--bg);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  padding: 16px 24px 24px 24px;
}

.card__category {
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 500;
  color: #868686;
}

.card__title {
  margin-top: 5px;
  color: var(--text);
  margin-bottom: 10px;
  font-family: 'Roboto Slab', serif;
}

.card__by {
  font-size: 12px;
  color: var(--text);
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
}

.card__author {
  font-weight: 600;
  text-decoration: none;
  color: #AD7D52;
}

.card-homework:hover .card__img--hover {
  height: 100%;
  opacity: 0.3;
}

.card-homework:hover .card__info {
  background-color: transparent;
  position: relative;
}

.card-homework:hover .card__info-hover {
  opacity: 1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="col-md-6">
  <div id="thisdiv" class="card">
    <div style="padding-top: 2%"></div>
    <div class="row col-md-12" style="padding-left: 3%">
      <style>
        .card--2 .card__img,
        .card--2 .card__img--hover {
          background-image: url('https://i.picsum.photos/id/863/500/500.jpg?hmac=k9hZck8HV2PYvXCF5AFoFSaVbSHibjhVO19llHsiaH4');
        }
      </style>

      <article class="card-homework card--2 image-first">
        <div class="card__info-hover">
          <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
                    <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
                    <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" /></svg>
        </div>
        <div class="card__img"></div>
        <a href="http://homewrk.test/homework/view/2" class="card_link">
          <div class="card__img--hover"></div>
        </a>
        <div class="card__info">
          <span class="card__category">Homework</span>
          <h3 class="card__title">Test</h3>
          <span class="card__by">deadline: <a href="#" class="card__author" title="author">20-06-2020</a></span>
        </div>
      </article>
      <style>
        .card--1 .card__img,
        .card--1 .card__img--hover {
          background-image: url('https://i.picsum.photos/id/863/500/500.jpg?hmac=k9hZck8HV2PYvXCF5AFoFSaVbSHibjhVO19llHsiaH4');
        }
      </style>

      <article class="card-homework card--1 image-first">
        <div class="card__info-hover">
          <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
                    <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none" />
                    <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" /></svg>
        </div>
        <div class="card__img"></div>
        <a href="http://homewrk.test/homework/view/1" class="card_link">
          <div class="card__img--hover"></div>
        </a>
        <div class="card__info">
          <span class="card__category">Homework</span>
          <h3 class="card__title">test</h3>
          <span class="card__by">deadline: <a href="#" class="card__author" title="author">22-06-2020</a></span>
        </div>
      </article>
    </div>
  </div>
  <script type="text/javascript">
    (function(undefined) {
      var setTime = function() {
        var date = new Date(),
          MINUTE = 60,
          HOUR = 60 * MINUTE,
          seconds = date.getSeconds(),
          minutes = (date.getMinutes() * MINUTE) + seconds,
          hours = (date.getHours() * HOUR) + minutes;
        document.getElementById('sekundes').setAttribute('transform', 'rotate(' + 360 * (seconds / MINUTE) + ',16,17)');
        document.getElementById('minutes').setAttribute('transform', 'rotate(' + 360 * (minutes / HOUR) + ',16,17)');
        document.getElementById('stundas').setAttribute('transform', 'rotate(' + 360 * (hours / (12 * HOUR)) + ',16,17)');
      }
      setTime();
      var interval = setInterval(setTime, 1000);
    })();
  </script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...