Cart look very messy on mobile

orhl1234
Shopify Partner
80 0 1

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?

orhl1234_0-1713793304575.png

 

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

orhl1234_1-1713793443517.png

 

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

Replies 8 (8)

theycallmemakka
Shopify Partner
1476 336 359

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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

orhl1234
Shopify Partner
80 0 1

thanks i can almost mark this as a solution!

just need a little help with that:

it's looks a bit messy 

 

 

 

orhl1234_0-1713797717658.png

 

is there a way to make it closer to this: 

orhl1234_1-1713797757834.png

 

theycallmemakka
Shopify Partner
1476 336 359

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.

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

orhl1234
Shopify Partner
80 0 1

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.

orhl1234_0-1713860520398.png

 

theycallmemakka
Shopify Partner
1476 336 359

Hi @orhl1234 ,

 

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

theycallmemakka_0-1713861285460.png

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

PageFly-Theodor
Globetrotter
556 73 85

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

orhl1234
Shopify Partner
80 0 1

thanks, i can almost mark this as a solution!

just need a little help with that:

it looks a bit messy 

 

 

 

orhl1234_0-1713798152495.png

 

 

is there a way to make it closer to this: 

orhl1234_1-1713798152509.png

 

 

orhl1234
Shopify Partner
80 0 1

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

what do you suggest

https://djng0bsolxovwti6-61846847737.shopifypreview.com