# Simple theme カートページのみレイアウト崩れ、メインコンテンツが浮いてしまう、ヘッダーとフッターに重なる、収まらない

**URL:** <https://community.shopify.com/t/simple-theme/22808>\
**Category:** 技術的なQ＆A\
**Created:** [October 13, 2020, 6:44am UTC](https://community.shopify.com/t/simple-theme/22808 "2020-10-13T06:44:41Z")\
**Posts on this page:** 1\
**Page:** 1

## AI-generated summary

Simpleテーマのカートページだけでレイアウトが崩れ、メインコンテンツが浮いてヘッダーやフッターに重なる問題が報告されている。ほかのページでは発生しておらず、対象は `/cart` のみ。\n\n- 投稿では、カート用のSCSS/CSSコードがそのまま共有されている。\n- コード内には、同じブロックの重複掲載や、`margin-bottom: $g : 0;` のような不自然な記述が含まれている。\n- `@include media-query(...)` などSCSS記法が使われており、レスポンシブ表示や `.cart-table`、`.cart__image`、`.cart__note` 周辺のスタイルが関係している。\n\n現時点では、原因の特定や修正方法の提示はまだなく、質問段階にとどまっている。画像や追加資料はなく、共有されたコード断片が問題把握の中心になっている。

<div class="post-metadata">

**Author:** ![zakkyobiru](https://avatars.discourse-cdn.com/v4/letter/z/bbce88/32.png) [@zakkyobiru](https://community.shopify.com/u/zakkyobiru)\
**Post date:** [October 13, 2020, 6:44am UTC](https://community.shopify.com/t/simple-theme/22808/1 "2020-10-13T06:44:41Z")

</div>

他のページは問題ないのですが、カートページだけ崩れます。

[https://zakkyobiru.myshopify.com/cart](https://zakkyobiru.myshopify.com/cart)

Simpleテーマでの現在のコード

```css
/*====== Cart page styles ======*/
.cart-table {
  width: 100%;
  margin-bottom: $gutter;
  
   th:first-child {
    padding-left: 0;
  }

  @include media-query($medium-down) {
    thead {
      display: none;
    }

    tr {
      display: block;
    }
    
    
    th,
    td {
      display: block;
      text-align: right;
      padding: $gutter / 2;
      margin: 0;

    td::before {
      content: attr(data-label);
      float: left;
      text-align: center;
      padding-right: 10px;
    }

    .responsive-table __row + .responsive-table__ row,
    tfoot > .responsive-table__row:first-child {
      position: relative;
      margin-top: 10px;
      padding-top: $gutter / 2;

      &::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: $gutter / 2;
        right: $gutter / 2;
        border-bottom: 1px solid $color-border;
      }
    }
  } 
    
    
  .cart__table-cell--image {
    padding-left: 25%;
    padding-right: 25%;

    @include media-query($medium-up) {
      padding-left: 35%;
      padding-right: 35%;
    }

    @include media-query($large-up) {
      padding-left: 0;
      padding-right: 0;
      width: 15%;
    }
  }
}

.cart__image-wrapper {
  margin: 0 auto;
}

.cart__image-container {
  display: block;
  position: relative;
}

.cart__image {
  display: block;
  width: 100%;

  .supports-js & {
    position: absolute;
    top: 0;
  }
  

  &.lazyload {
    opacity: 0;
  }
}

.cart__note {
  margin-bottom: 50px;

  @include media-query($medium-up) {
    margin-bottom: $gutter;
  }
}

.cart__remove {
  color: $color-body-text;
}

.cart__policies {
  margin-bottom: 50px;
}

.update-cart {
  margin-right: 4px;
}

@include media-query($large-up) {

  .cart__table-cell--meta {
    padding-left: $gutter / 2;
    padding-right: $gutter / 2;
    padding-top: 0;
    padding-bottom: 0;
    width: 30%;
  }

  .cart__table-cell--price,
  .cart__table-cell--line-price,
  .cart__table-cell--quantity {
    width: auto;
    padding: 0;

    span {
      white-space: nowrap;
    }
  }

  .cart__table-cell--price {
    width: 25%;
  }
}

.cart--empty-message {
  .cart--no-cookies & {
    display: none;
  }
}

.cart--continue-message {
  .cart--no-cookies & {
    display: none;
  }
}

.cart--cookie-message {
  display: none;
  padding-bottom: 25px;

  .cart--no-cookies & {
    display: block;
  }
}

.article .list--inline {
  margin-bottom: $gutter / 2;
}

.comments {
  padding-left: 0;
  margin-left: 0;
}

.article__image-wrapper {
  display: block;
  position: relative;
}

.article__image {
  display: block;
  margin-bottom: $gutter / 2;
  width: 100%;

  .supports-js & {
    position: absolute;
    top: 0;
  }

  &.lazyload {
    opacity: 0;
  }
}

```

新しいアカウントを作って、元々のコードと見比べました。

```css
/*====== Cart page styles ======*/

.cart-table {
  width: 100%;
  margin-bottom: $gutter;

  th:first-child {
    padding-left: 0;
  }

  @include media-query($medium-down) {
    thead {
      display: none;
    }

    tr {
      display: block;
    }

    th,
    td {
      display: block;
      text-align: right;
      padding: $gutter / 2;
      margin: 0;
    }

    td::before {
      content: attr(data-label);
      float: left;
      text-align: center;
      padding-right: 10px;
    }

    .responsive-table __row + .responsive-table__ row,
    tfoot > .responsive-table__row:first-child {
      position: relative;
      margin-top: 10px;
      padding-top: $gutter / 2;

      &::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: $gutter / 2;
        right: $gutter / 2;
        border-bottom: 1px solid $color-border;
      }
    }
  }

  .cart__table-cell--image {
    padding-left: 25%;
    padding-right: 25%;

    @include media-query($medium-up) {
      padding-left: 35%;
      padding-right: 35%;
    }

    @include media-query($large-up) {
      padding-left: 0;
      padding-right: 0;
      width: 15%;
    }
  }
}

.cart__image-wrapper {
  margin: 0 auto;
}

.cart__image-container {
  display: block;
  position: relative;
}

.cart__image {
  display: block;
  width: 100%;

  .supports-js & {
    position: absolute;
    top: 0;
  }

  &.lazyload {
    opacity: 0;
  }
}

.cart__note {
  margin-bottom: 50px;

  @include media-query($medium-up) {
    margin-bottom: $gutter;
  }
}

.cart__remove {
  color: $color-body-text;
}

.cart__policies {
  margin-bottom: 50px;
}

.update-cart {
  margin-right: 4px;
}

@include media-query($large-up) {

  .cart__table-cell--meta {
    padding-left: $gutter / 2;
    padding-right: $gutter / 2;
    padding-top: 0;
    padding-bottom: 0;
    width: 30%;
  }

  .cart__table-cell--price,
  .cart__table-cell--line-price,
  .cart__table-cell--quantity {
    width: auto;
    padding: 0;

    span {
      white-space: nowrap;
    }
  }

  .cart__table-cell--price {
    width: 25%;
  }
}

.cart--empty-message {
  .cart--no-cookies & {
    display: none;
  }
}

.cart--continue-message {
  .cart--no-cookies & {
    display: none;
  }
}

.cart--cookie-message {
  display: none;
  padding-bottom: 25px;

  .cart--no-cookies & {
    display: block;
  }
}

.article .list--inline {
  margin-bottom: $gutter / 2;
}

.comments {
  padding-left: 0;
  margin-left: 0;
}

.article__image-wrapper {
  display: block;
  position: relative;
}

.article__image {
  display: block;
  margin-bottom: $gutter / 2;
  width: 100%;

  .supports-js & {
    position: absolute;
    top: 0;
  }

  &.lazyload {
    opacity: 0;
  }
}

```

こちらはsimpleのオリジナルデザインで、このように作動してます

 ![スクリーンショット 2020-10-13 15.30.37.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/2/6/2670ec273c8438d66f2efddacf255939859c7acf.jpeg)

よく見ると

```css
th,
    td {
      display: block;
      text-align: right;
      padding: $gutter / 2;
      margin: 0;
    }

```

こちらの最後の } が抜けていることに気付き、私のホームページの方に挿入したところ、カートページの元々のレイアウトは戻ったようですが、ホームページ全体のレイアウトが崩れました。

 ![スクリーンショット 2020-10-13 15.25.38.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/a/d/ad7b33d23fbe6a085ce287f4f4ee56775aefe7a7.png)

 ![スクリーンショット 2020-10-13 15.25.12.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/3/b/3bf05128591339937f52847643bb9e992cd9f409.png)

 ![スクリーンショット 2020-10-13 15.24.56.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/8/7/876d20226e4063b388a943d0b7fa40a43d2a7ff5.jpeg)

しかし、 } を抜くと、ホームページは崩れませんが、カートページのレイアウトが崩れます。

 ![スクリーンショット 2020-10-13 15.27.16.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/7/a/7adae8aa0f7eaa6848380a6ee17cf989cd54609d.jpeg)

TemplatesのCart.liquidも元に戻してみましたが、変わらないです。

コード編集初心者で、ネットで調べながら少しずつ変更していましたが、どこが間違っているのかわかりません、、

可能性のある場所だけでも分かれば大変助かります。

もし原因が分かる方がいらっしゃればよろしくお願いいたします、、