How to place two sections side by side on the cart page (DAWN 12.0.0 theme)

[DRAWandCARE]

Hello, everyone!

I'm currently using the Dawn 12.0.0 theme for my website. I'm wondering if there's a way to place two sections side by side on the cart page. Please check the screenshots I provided below for a visual explanation of what I need.

On the cart page of the site, I'd like to position the Subtotal Section next to the Rich Text Section:

Website link: https://www.drawandcare.com/cart

Will be grateful for any help!

[suyash1 · Accepted solution]

@DRAWandCARE - add this css to the end of your base.css file and check

@media screen and (min-width:750px){
#shopify-section-template--20656335323436__e89524bb-aa41-4db7-9093-8179d83fa9f3{
display: inline-block;  width: 50%;}

#shopify-section-template--20656335323436__cart-footer{display: inline-block; width: 50%;}
}

[suyash1 · Accepted solution]

@DRAWandCARE - add this css to the end of your base.css file and check

@media screen and (min-width:750px){
#shopify-section-template--20656335323436__e89524bb-aa41-4db7-9093-8179d83fa9f3{
display: inline-block;  width: 50%;}

#shopify-section-template--20656335323436__cart-footer{display: inline-block; width: 50%;}
}

[DRAWandCARE]

Thanks for your reply,

We're almost there! Could we also make them fit the width of the website page (1300px)?

Thank you very much!

[suyash1 · Accepted solution]

@DRAWandCARE - try by adding max-width:65rem, so it becomes

@media screen and (min-width:750px){
#shopify-section-template--20656335323436__e89524bb-aa41-4db7-9093-8179d83fa9f3{
display: inline-block;  width: 50%; max-width: 65rem;}

#shopify-section-template--20656335323436__cart-footer{display: inline-block; width: 50%; max-width: 65rem;}
}

[DRAWandCARE]

Yes, it worked, but now it just needs to be centered:

 Thank you!

[suyash1]

@DRAWandCARE - add this css as well and check

@media screen and (min-width:750px){
#shopify-section-template--20656335323436__e89524bb-aa41-4db7-9093-8179d83fa9f3 .rich-text__blocks{text-align: center !important;}

#shopify-section-template--20656335323436__e89524bb-aa41-4db7-9093-8179d83fa9f3 .rich-text__blocks .rich-text__buttons {justify-content: center !important;}

#shopify-section-template--20656335323436__cart-footer .cart__blocks{margin: 0 auto !important;}
}

[DRAWandCARE]

It centered the content, but I meant that I needed to add some margin on the left or something so that these sections would be the same as all the content on the page above and on the entire site, "in the middle" of the screen, not from the very edge on the left:

Apologize for so many additional questions. I truly appreciate your help and the time you've dedicated to my issue! 🙏

[suyash1]

@DRAWandCARE - that would be difficult as these sections do not have a container structure around them

[DRAWandCARE]

I see. Okay, thank you so much anyway! I'll try to come up with something based on what I have already.