CODEWITHSUNDEEP
htmlcsssasspug
Kirby Tan
Kirby Tan

Reputation: 123

How to make the lines all equal in height?

I've noticed that the lines are equal in height, I tried to add height: 100% in some specific containers but nothing happened. Any ideas would be appreciated.~

The first image is the expected output with equal lines below.

[![It should be like this][1]][1]

[![This is my output][2]][2]

This is my output. The lines are not equal below. I marked it with dots.

This is my codes in scss

.content {
  position: relative;
  @include max-width;

  &__image {
    width: 100%;
    height: 202px;
    object-fit: cover;
    object-position: center;
    border: 5px solid white;
    @include sp {
      width: 85.38%;
      height: auto;
    }

    &--small {
      border: 4px solid white;
      height: 147px;
      @include sp {
        top: -10px;
        width: 33.29%;
        height: auto;
      }
    }
  }

  &__item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 378px;
    color: black;
    margin: 0;
    @include sp {
      width: 100%;
      height: auto;
    }

    &--small {
      width: 278px;
      @include sp {
        flex-direction: row;
        align-items: flex-start;
        width: 100%;
      }
    }

    &:not(:last-child) {
      margin-bottom: 31px;
      @include sp {
        margin-bottom: getsp375(40px);
      }
    }

    &:not(:nth-child(3n+3)) {
      margin-right: 35px;
      @include sp {
        margin-right: 0;
      }
    }
  }

  &__item-container {
    width: 1220px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 27px;
    height: 100%;
    @include sp {
      width: 100%;
      margin-top: getsp375(42px);
      height: auto;
      justify-content: center;
    }

    &--small {
      width: 907px;
      @include sp {
        width: 100%;
      }
    }
  }

  &__date {
    position: absolute;
    margin-top: 5px;
    left: -5px;
    top: 38px;
    height: 28px;
    white-space: nowrap;
    transform: rotate(-90deg);
    @include sp {
      margin-top: 0;
      left: getsp375(-45px);
      top: getsp375(90px);
    }

    &--small {
      left: -10px;
      @include sp {
        left: 0;
        top: getsp375(27px);
      }
    }
  }

  &__date-text {
    font-size: 12px;
    @include sp {
      font-size: getsp375(18px);
    }
  }

  &__wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 8px;
    padding-left: 50px;
    @include sp {
      display: block;
      padding-top: 0;
      padding-left: getsp375(20px);
      width: 92%;
      height: auto;
    }
  }

  &__category-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &--small {
      @include sp {
        margin-left: getsp375(15px);
        margin-right: getsp375(30px);
      }
    }
  }

  &__category-line {
    border-left: 1px solid $border;
    margin-left: 6px;
    margin-top: 15px;
    padding-bottom: 5px;
    padding-right: 8px;
    @include sp {
      margin-left: getsp375(18px);
      margin-top: getsp375(32px);
      padding-bottom: getsp375(19px);
      padding-right: 0;
      width: 100%;
      max-width: 100%;
    }

    &--small {
      margin-left: -5px;
      @include sp {
        margin-left: getsp375(50px);
        margin-top: getsp375(1px);
        padding-bottom: getsp375(40px);
      }
    }
  }

  &__category-text {
    font-size: 16px;
    letter-spacing: 0.1em;
    padding-left: 19px;
    width: 338px;
    max-width: 100%;
    @include sp {
      font-size: getsp375(26px);
      padding-left: getsp375(15px);
      width: 100%;
      max-width: 100%;
    }

    &--small {
      width: 234px;
      padding-left: 14px;
      @include sp {
        position: absolute;
        width: 100%;
        top: -4px;
      }
    }

    &--sidepanel {
      width: 100%;
      padding-left: 0;
      line-height: 2.25em;
    }

    &::before {
      content: ' \25A0';
      padding-right: getsp375(14px);
      cursor: pointer;
      @include sp {
        padding-right: getsp375(10px);
      }
    }

    &--skyblue {
      color: $skyblue;
    }

    &--islamicgreen {
      color: $islamicgreen;
    }

    &--tawny {
      color: $tawny;
    }

    &--purple {
      color: $purple;
    }

    &--amaranth {
      color: $amaranth;
    }
  }

  &__title-line {
    border-top: 1px solid $border;
    border-left: 1px solid $border;
    margin-left: 6px;
    padding-right: 8px;
    padding-bottom: 21px;
    @include sp {
      margin-left: getsp375(18px);
      padding-right: getsp375(8px);
      padding-bottom: getsp375(21px);
      width: 100%;
      max-width: 100%;
    }

    &--small {
      margin-left: -13px;
      padding-bottom: 5px;
      padding-right: 0;
      @include sp {
        margin-left: getsp375(50px);
        padding-bottom: getsp375(20px);
      }
    }
  }

  &__title {
    padding-top: 21px;
    padding-left: 22px;
    font-size: 24px;
    font-family: $mincho;
    font-weight: $medium;
    line-height: 1.5em;
    width: 338px;
    max-width: 100%;
    @include sp {
      padding-left: getsp375(21px);
      padding-top: getsp375(17px);
      font-size: getsp375(36px);
      width: 100%;
    }

    &--small {
      padding-top: 13px;
      padding-left: 15px;
      padding-right: 8px;
      font-size: 18px;
      line-height: 1.44em;
      width: 234px;
      @include sp {
        padding-top: getsp375(19px);
        padding-left: getsp375(21px);
        font-size: getsp375(32px);
        line-height: 1.5em;
        padding-right: 0;
        width: 100%;
      }
    }

    &--sidepanel {
      font-size: 18px;
      line-height: 1.5em;
      padding-top: 0;
      padding-left: 0;
      width: 100%;
      @include sp {
        font-size: getsp375(27px);
      }
    }
  }
}

This is my codes in pug

div.content
      //- SECTION - PICKUP
      section.pickup
        div.container__content
          div.title
            div.title__lines
              h1.title__text PICKUP
          div.content__item-container
            a.content__item(href="#")
              img.content__image(src="./img/pickup__img1.jpg", alt="pickup1")
              div.content__wrapper
                div.content__date
                  p.content__date-text 22 Jun, 2020
                div.content__category-wrapper
                  div.content__category-line
                    p.content__category-text.content__category-text--skyblue 講習会
                  div.content__title-line
                    p.content__title リアルをコアとした体験をデザインし、情報拡散や態度変容などの効果を検証
            a.content__item(href="#")
              img.content__image(src="./img/pickup__img2.jpg", alt="pickup2")
              div.content__wrapper
                div.content__date
                  p.content__date-text 22 Jun, 2020
                div.content__category-wrapper
                  div.content__category-line
                    p.content__category-text.content__category-text--islamicgreen イベント
                  div.content__title-line
                    p.content__title リアルをコアとした体験をデザインし、情報拡散や態度
            a.content__item(href="#")
              img.content__image(src="./img/pickup__img3.jpg", alt="pickup3")
              div.content__wrapper
                div.content__date
                  p.content__date-text 22 Jun, 2020
                div.content__category-wrapper
                  div.content__category-line
                    p.content__category-text.content__category-text--tawny お知らせ
                  div.content__title-line
                    p.content__title リアルをコアとした体験をデザインし、情報拡散や態度変容などの効果を検証リアル...を

Upvotes: 2

Views: 85

Answers (1)

cam
cam

Reputation: 3626

It was too difficult to debug your code so I created a new "card" structure.

EDIT: I was able to get your code to work by adding height: 100%; to the &__title-line and &__wrapper selectors while also adjusting the width and margins of the "columns" to use % values instead of fixed values.

Fixing Existing Structure

Check out the codepen and the difference between the css.

Alternate New Structure

.card
  img(src="https://via.placeholder.com/300x150")
  .card__body
    .card__left
      | 22 Jun, 2020
    .card__right
      .card__category.card__category--green
        | ■ イベント
      .card__content
        | リアルをコアとした体験をデザインし、情報拡散や態度

And then the following "card" scss

.card {
 display: flex;
 flex-direction: column;
 flex-shrink: 0;
 padding: 10px;
 width: 33.3%;

  img {
    border: 5px solid #fff;
    margin-bottom: 15px;
    max-width: 100%;
  }

  &__body {
    display: flex;
    height: 100%;
  }

  &__left {
    font-size: 10px;
    padding-right: 5px;
    text-align: right;
    writing-mode: sideways-lr;
  }

  &__right {
    border-left: 1px solid #000;
    width: 100%;
  }

  &__category {
    border-bottom: 1px solid #000;
    font-size: 12px;
    padding: 0 0 5px 10px;

    &--green {
      color: #1b9d00;
    }

    &--blue {
      color: #467bde;
    }

    &--orange {
      color: #b67606;
    } 
  }

  &__content {
    padding: 10px 0 10px 10px;
  }
}

Run the example below to check it out.

* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
  margin: 0;
}

.row {
  display: flex;
}

.card {
 display: flex;
 flex-direction: column;
 flex-shrink: 0;
 padding: 10px;
 width: 33.3%;
}

img {
  border: 5px solid #fff;
  margin-bottom: 15px;
  max-width: 100%;
}

.card__body {
  display: flex;
  height: 100%;
}

.card__left {
  font-size: 10px;
  padding-right: 5px;
  text-align: right;
  writing-mode: sideways-lr;
}

.card__right {
  border-left: 1px solid #000;
  width: 100%;
}

.card__category {
  border-bottom: 1px solid #000;
  font-size: 12px;
  padding: 0 0 5px 10px;
}

.card__category--blue {
  color: #467bde;
}

.card__category--green {
  color: #1b9d00;
}

.card__category--orange {
  color: #b67606;
}

.card__content {
  padding: 10px 0 10px 10px;
}
<div class="row">
  <div class="card">
    <img src="https://via.placeholder.com/300x150">
    <div class="card__body">
      <div class="card__left">
        22 Jun, 2020
      </div>
      <div class="card__right">
        <div class="card__category card__category--blue">
         ■ 講習会
        </div>
        <div class="card__content">
          リアルをコアとした体験をデザインし、情報拡散や態度変容などの効果を検証
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/300x150">
    <div class="card__body">
      <div class="card__left">
        22 Jun, 2020
      </div>
      <div class="card__right">
        <div class="card__category card__category--green">
          ■ イベント
        </div>
        <div class="card__content">
          リアルをコアとした体験をデザインし、情報拡散や態度
        </div>
      </div>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/300x150">
    <div class="card__body">
      <div class="card__left">
        22 Jun, 2020
      </div>
      <div class="card__right">
        <div class="card__category card__category--orange">
          ■ お知らせ
        </div>
        <div class="card__content">
          リアルをコアとした体験をデザインし、情報拡散や態度変容などの効果を検証リアル...を
        </div>
      </div>
    </div>
  </div>  
</div>

Upvotes: 1

Related Questions