Changes in placement, gaps - cart page - with TIPS

[manter]

Hello. I would like to adjust the cart page a bit. Now the objects are very poorly aligned/not aligned, there are too big gaps or no gaps at all. Maybe you could help me?

I can tip for these changes!

PAGE: https://holycup.lt/cart

Mobile - before and preferable after:

Web:

Before:

After:

I hope that's not too much to ask (?)

[Made4uo-Ribe]

Hi @manter 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media (max-width: 790px) {
.tt-shopcart-table-02 .tt-shopcart-btn {
    flex-direction:row;
    gap: 15px;
}
.tt-shopcart-col, p.text-to-left {
        margin-top: 0px !important;
    }
div#af_kd_discount_container0 {
    padding-bottom: 30px;
}
.component-row.delivery-methods {
    margin-top: 5px;
}
    .delivery-method-text {
        margin: 0 4px 14px;
}
.carriers .component-row {
    margin-top: 0px !important;
    margin-right: 0px;
    margin-bottom: 0px;
}
.carrier-selection img {
    width: 5rem;
}
.carrier-selection{
    margin-top: 5px;
    margin-bottom: 0px;
}
div#carrierSection {
    margin-bottom: 5px;
}
.select2-container {
    margin-bottom: 20px;
}
    }

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[manter]

Hi there! Thank you so much. It's much better than it was before, but still what I see doesn't match your screenshot. Maybe you have idea where might be the issue? :?

[Made4uo-Ribe · Accepted solution]

Add this one then.

@media (max-width: 790px) {
.component-row.delivery-methods p {
    padding-bottom: 14px !important;
}
.delivery-method img {
    margin-bottom: 5px !important;
}
.carrier-selection {
    margin-top: 0px !important;
}
.select2-container--default .select2-selection--single {
   margin-bottom: 15px !important;
}
span.select2.select2-container.select2-container--default {
    max-width: 100%;
}
}

And Save. 

Do you use app on this icons? Some of the app dont follow the edits on the from the base.css. Let me know what else is not listening to the edits. Also, the shipping company the 3rd icon on more smaller screen still cut. If you make if more smaller the logo wonth be readable. I suggest to make it align donw the 3rd icons. Like this. 

This is the code I use. 

@media only screen and (max-width: 435px){
.component-row {
    flex-wrap: wrap;
}
}

And Save.

Dont forget to refresh the browser after saving, to get the goof result of edits. Thanks!

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[manter]

Thank you, made the changes, all good on mobile, added a tip! Maybe you could also help me a bit with the gaps on desktop?

[Made4uo-Ribe]

Thank you for the tips, yes sure. But can make it like the one you posted image? where can I adjust so it wont be confusing on my side. I've done it easier cause I have a guide for edits. Thanks!

[manter]

Hi! 

Yes sure.

This is how it looks like now:

And this is preliminary expectation:

[Made4uo-Ribe]

Hi @manter 

Check this one for dekstop.

Same Instruction. 

.carriers .component-row, .carrier-selection, .component-row.delivery-methods {
    margin-top: 0px !important;
}
.carriers .component-row {
    margin-bottom: 0px !important;
}

And save. 

Result: