Two Sections Side By Side

Topic summary

A Shopify webshop developer needed help positioning two sections side-by-side on a store page. The goal was to display a rich text section alongside a multicolumn section in a specific layout (approximately 33%/66% split).

Solution provided:

  • Custom CSS code using CSS Grid
  • Applied through Theme Settings → Custom CSS
  • Grid template creates 1fr:2fr column ratio
  • Media query ensures layout only applies on desktop (min-width: 990px)
  • Targets specific Shopify section IDs to control positioning

Outcome:
The solution successfully resolved the issue. The developer confirmed the CSS code worked as intended, achieving the desired side-by-side layout matching the reference screenshot.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.

hello everyone,

I am making a webshop for a customer and I am stumbeling against something.

I want to have two sections side by side. The first section is identified by “shopify-section-template–23693559038280__rich_text_mBk7Pr”. The seconnd section is identified by “shopify-section-template–23693559038280__multicolumn_zziW9P”. I want it to be like the picture I provided. The website is https://0xcinp-eb.myshopify.com/ with password chiesk.

I hope any of you can help me out.

Kind regards,

Jonathan

ps. this is how I want it to be

You can do that by adding the following code to the Customize=> “Theme settings”=> “Custom CSS”:

main {
  display: grid;
  grid-template-columns: 1fr 2fr;   /* split 33% to 66% */
}
main>* {
  grid-column: 1/3;
}

@media (min-width:990px){
  section#shopify-section-template--23693559038280__rich_text_mBk7Pr {
    grid-column: 1/2;
  }
  section#shopify-section-template--23693559038280__multicolumn_zziW9P {
    grid-column: 2/3;
  }
}

Thank you so much Tim, you have no idea how much this has helped me.

1 Like