Cart Section - Full Width

Store Design
, , , , ,
1

Good day!

For whatever reason a part of my cart is besides (on the right) of product selection on the desktop. How can I move it below similar to what it looks now on mobile or tablets?

Website : Flower Delivery Ottawa – Nectar Flowers Ottawa

Carpinus_0-1716510972335.png
Carpinus_0-1716510972335.png1920×1080 217 KB

What I want it to look like

Carpinus_1-1716511021516.png
Carpinus_1-1716511021516.png1920×1080 236 KB

Please please please. Thank you!!!

2

Hi @Carpinus ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

BSSTechVenture_0-1716512022383.png
BSSTechVenture_0-1716512022383.png1902×899 133 KB

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

BSSTechVenture_1-1716512026931.png
BSSTechVenture_1-1716512026931.png1916×934 101 KB

Step 3: Insert the below code at the bottom of the file → Save

@media only screen and (min-width: 769px) {
    .cart__page-col:last-child {
        flex: 0 1 100% !important;
    }
}

Here is result:

BSSTechVenture_2-1716512068753.png
BSSTechVenture_2-1716512068753.png1528×884 50 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

3

Hi @Carpinus

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file → Save

.cart__page {

flex-direction: column !important;

}

.cart__page-col {

width: 100% !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

4

Hello @Carpinus

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->theme.css>add this code at the bottom of the file.

.cart__page {
    flex-direction: column;
}
.cart__page-col {
    width: 100%;
}