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

[Tech_Coding · Accepted solution]

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 </body> on theme.liquid
<style>
@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%;
   }
}
</style>

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

[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 · Accepted solution]

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 </body> on theme.liquid
<style>
@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%;
   }
}
</style>

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 · Accepted solution]

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 </body> on theme.liquid
<style>
@media screen and (max-width: 767px){
  .multicolumn.background-none .multicolumn-card {
      text-align: center !important;
  }
  .background-none .multicolumn-card-spacing {
     margin: 0 auto !important;
  }
}
</style>

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

[INFRA]

amazing, thanks so much!