Why is my cart page broken and images missing on mobile view?

Technical Q&A
,
1

This is my cart page, everything has moved to the left and the photo is smaller.

スクリーンショット 2022-01-27 22.46.43.png
スクリーンショット 2022-01-27 22.46.43.png2064×1286 202 KB

In the mobile version, the photos are gone and the shape is broken.

IMG_0003.PNG
IMG_0003.PNG750×1334 117 KB

I shouldn’t have coding the cart page, so I don’t know the cause.

This is css for cart page.

/*====== 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;
  }
}

If you need other part of html / css please tell me that.

2

@zakkyobiru

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

@Zworthkey

Thanks for your reply.
I haven’t looked at the cart page for a while so I don’t know when this happened..

This is my website.

zakkyobiru.com

4

Anyone knows?

I thought it’s due to float:left; but is it a different cause?

I’m not so familiar with coding so I would be grateful if someone could help me.