Cart look very messy on mobile

[orhl1234]

im using the theme floe. on mobile the cart looks bad in my opinion. I prefer even the Dwan cart over this one.

how can I make every added product to take one lone is stad of caples lines?

on theme dawn in my opinion it looks way better and cleaner:

store
https://28hb4a9go0e7y1ye-61323608109.shopifypreview.com

[theycallmemakka]

Hi

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
@media only screen and (max-width: 600px) {
tr.cart__row.table__section td {
    padding: 0px;
    padding-top: 10px; 
    padding-bottom: 10px;
}

tr.cart__row.table__section {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.table--responsive.cart-table img {

    max-height: 70px!important;
    max-width: 70px!important;
    height: 70px!important;
    width: 70px!important;
    object-fit: contain;
}
}
</style>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[orhl1234]

thanks i can almost mark this as a solution!

just need a little help with that:

it's looks a bit messy 

is there a way to make it closer to this: 

[theycallmemakka]

To make this, we will have to update it on DOM level. For this i will require access to the theme and more time to edit.

[orhl1234]

just have one question so I can mark it as a solution, 

how can I increase the size of the image? 

couldn't do it myself.

[theycallmemakka]

Hi @orhl1234 ,

You can increase the size by increasing the height, width, max-height and max-weight on the previous code

[PageFly-Theodor]

Hi @OwenTheOrdinary

This is Theodore from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
@media only screen and (max-width: 767px) {
tr.cart__row.table__section td {
    padding: 0px;
    padding-top: 10px; 
    padding-bottom: 10px;
}

tr.cart__row.table__section {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.table--responsive.cart-table img {

    max-height: 70px!important;
    max-width: 70px!important;
    height: 70px!important;
    width: 70px!important;
    object-fit: contain;
}
}
</style>

Hope this can help you solve the issue

Best regards,

Theodore | PageFly

[orhl1234]

thanks, i can almost mark this as a solution!

just need a little help with that:

it looks a bit messy 

is there a way to make it closer to this: 

[orhl1234]

you the best but it didn't work well when I switched to drawer

what do you suggest

https://djng0bsolxovwti6-61846847737.shopifypreview.com