Multi column Dawn theme - Move image to left of content

[INFRA]

Hi there,

Is it possible to move the image in the multicolumns to the left of the content as below? Currently it is sitting above it, which is fine for mobile, but for anything bigger, I would like to show it like below.

Thanks so much!

website

passw: fbc

[ZestardTech]

Hi @INFRA

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

.multicolumn-card__info {
padding-top: 0!important;
}
.multicolumn-card.content-container {
display: flex;
flex-wrap: nowrap;
}

[Dan-From-Ryviu]

Hi @INFRA

Please add this code to Custom CSS of that Multiple column section

@media (min-width: 749px) {
.multicolumn-card {
    display: flex;
    align-items: center;
}
}

[Tech_Coding]

Hello @INFRA

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media screen and (min-width: 990px){ .multicolumn.background-none .multicolumn-card { display: flex; align-items: center; } .background-none .multicolumn-list .multicolumn-card__info{ width: 70%; } .background-none .multicolumn-card__image-wrapper { width: 30%; } }

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[INFRA]

That worked! Thank you. (I adjusted to 80/20) Is it possible to have the content centered on mobile only?

[Tech_Coding]

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px){ .multicolumn.background-none .multicolumn-card { text-align: center !important; } .background-none .multicolumn-card-spacing { margin: 0 auto !important; } }

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[INFRA]

amazing, thanks so much!