Shopify themes, liquid, logos, and UX
This is my cart page, everything has moved to the left and the photo is smaller.
In the mobile version, the photos are gone and the shape is broken.
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; } }
I thought it's due to float:left; but not cause?
td is broken maybe,right?
So please tell me the reason why it went wrong suddenly.
If you need other part of html / css please tell me that.
Please share your store URL!
Thanks!
Compared to the code when the cart page worked well before, it was exactly the same as the code I posted at the beginning.
Therefore, it seems that another part is breaking.
If so, is it possible to compare the two files to find the problem?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024