Сетка CSS: на небольших устройствах карта не отображается внутри поля сетки - PullRequest
Новая
       8

Сетка CSS: на небольших устройствах карта не отображается внутри поля сетки

0 голосов
/ 16 июня 2019

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

как это выглядит

enter image description here

CSS 

.skills {
  background-color: #fff;
  .skills-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    padding: 0 4rem;
    grid-gap: 3rem;

    .example-card {
      border-radius: 5px;
      margin-top: -10rem;
      margin-bottom: 15%;
      z-index: 6;
      padding: 0 !important;

      &__header {
        height: 10rem;
        display: flex;
        align-items: center;
        text-align: center;
        font-weight: 600 !important;

        mat-card-subtitle {
          @include respond(tab-port) {
            display: none;
          }
        }
      }

      .card-img {
        height: 30rem;
        width: 100% !important;
        margin: 0 !important;

        @include respond(tab-land) {
          height: 20rem;
        }
      }
    }
  }
}

HTML 

<section class="skills">
  <div class="skills-container">
    <mat-card class="example-card">
      <mat-card-header class="example-card__header">
        <mat-card-title>Front End Development</mat-card-title>
        <mat-card-subtitle>HTML, CSS, Javascript, Angular</mat-card-subtitle>
      </mat-card-header>
      <img class="card-img" mat-card-image src="/assets/images/front-end.jpg" alt="front-end">
    </mat-card>
    <mat-card class="example-card">
      <mat-card-header class="example-card__header">
        <mat-card-title>Back End Development</mat-card-title>
        <mat-card-subtitle>Node.js, Express, MongoDB, Socket.io,...</mat-card-subtitle>
      </mat-card-header>
      <img class="card-img" mat-card-image src="/assets/images/nodejs.jpeg" alt="Photo of a Shiba Inu">
    </mat-card>
    <mat-card class="example-card">
      <mat-card-header class="example-card__header">
        <mat-card-title>Web Design</mat-card-title>
        <mat-card-subtitle>CSS, SCSS, Responsive design,...</mat-card-subtitle>
      </mat-card-header>
      <img class="card-img" mat-card-image src="/assets/images/responsive.jpg" alt="Photo of a Shiba Inu">
    </mat-card>
  </div>
</section>

edit: Вероятно, это связано с тем фактом, что карта имеет верхний край -10rem, как я могу убедиться, что карта на следующей строке не имеет этого?

1 Ответ

0 голосов
/ 16 июня 2019

Возможно, вы захотите удалить отрицательное поле на .example_card

...