Multi column Dawn theme - Move image to left of content

Store Design

Topic summary

A user seeks to reposition the image in Shopify’s Dawn theme multicolumn section from above the content to the left side on desktop, while keeping it above on mobile.

Solutions Provided:

Three community members offered CSS code solutions:

  • ZestardTech: Suggested adding flexbox CSS to base.css to create a horizontal layout
  • Dan-From-Ryviu: Recommended adding media query code to the section’s Custom CSS for screens wider than 749px
  • Tech_Coding: Provided code for theme.liquid with media queries, including width adjustments (30% image, 70% content)

Outcome:

The original poster confirmed Tech_Coding’s solution worked after adjusting the ratio to 80/20. They then requested an additional feature to center content on mobile only, which Tech_Coding addressed with a follow-up CSS snippet using a max-width media query for screens under 767px.

The discussion concluded successfully with the user expressing gratitude for the working solution.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

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.

Screenshot 2024-10-11 at 19.18.50.png
Screenshot 2024-10-11 at 19.18.50.png1447×480 105 KB

Thanks so much!

website

passw: fbc

1 Like
2

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;
}

ZestardTech_0-1728636152328.png
ZestardTech_0-1728636152328.png1876×656 50.9 KB

3

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;
}
}

Screenshot 2024-10-11 at 15.49.33.png
Screenshot 2024-10-11 at 15.49.33.png2578×756 76.3 KB

4

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%; } }

Tech_Coding_0-1728637041523.png
Tech_Coding_0-1728637041523.png1234×334 45.7 KB

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

1 Like
5

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

6

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; } }

Tech_Coding_0-1728641003687.png
Tech_Coding_0-1728641003687.png316×507 23.9 KB

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

1 Like
7

amazing, thanks so much!