Cart look very messy on mobile

Store Design
,

Topic summary

A user reports that the cart page on the Floe theme appears messy on mobile, with products spanning multiple lines instead of single lines. They prefer the cleaner Dawn theme cart layout.

Solutions Provided:

  • Initial CSS code was shared to add to theme.liquid above the </body> tag to condense cart items
  • Additional CSS was provided to add above </head> to further refine the layout

Ongoing Issues:

  • The user requests help making the layout closer to the Dawn theme’s appearance
  • They want to increase the product image size in the cart
  • Guidance was given to adjust height, width, max-height, and max-width values in the previous CSS code
  • The solution doesn’t work properly when switching to drawer cart view

Status: Unresolved. The user has not marked a solution, as the CSS fixes don’t fully address the drawer cart display issue. Screenshots were shared throughout to illustrate the problems.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
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
orhl1234_0-1713793304575.png2160×1352 185 KB

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

orhl1234_1-1713793443517.png
orhl1234_1-1713793443517.png392×854 30.6 KB

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

2

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

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

3

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
orhl1234_0-1713797717658.png688×854 39 KB

is there a way to make it closer to this:

orhl1234_1-1713797757834.png
orhl1234_1-1713797757834.png184×400 18.7 KB

4

Hi @OwenTheOrdinary

This is Theodore from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the 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

Hope this can help you solve the issue

Best regards,

Theodore | PageFly

5

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
orhl1234_0-1713798152495.png322×400 21.5 KB

is there a way to make it closer to this:

orhl1234_1-1713798152509.png
orhl1234_1-1713798152509.png184×400 18.7 KB

6

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.

7

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
orhl1234_0-1713860520398.png688×854 53.8 KB

8

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
theycallmemakka_0-1713861285460.png941×532 33.5 KB

9

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

what do you suggest

https://djng0bsolxovwti6-61846847737.shopifypreview.com