Change the size and spacing between columns in "Multicolumn" section (Dawn 11.0.0)

Store Design
, ,

Topic summary

Goal: Make the 3-column Multicolumn section in Dawn 11.0.0 match the top section (image/caption size, centering, and spacing), across a page containing 4- and 3-column blocks.

Key actions and outcomes:

  • The page link was shared. A responder provided code to add in theme.liquid (head). The OP confirmed this fixed the desktop sizing/spacing as desired.
  • Another contributor suggested an alternative CSS approach in Assets/base.css, targeting a specific Multicolumn section by its section ID. Their CSS set 3-column items to a 25% width (matching 4-column sizing), centered the slider, and added horizontal margins to image wrappers. This indicates changes can be scoped per section via IDs.

New/ongoing items:

  • OP asked how to make a single-column image match others in size and be centered on mobile (desktop already fine). No solution provided yet.
  • A participant asked whether the changes affect all Multicolumn sections and how to restrict them to one. No explicit answer, though the section-ID-based CSS suggests scoping is possible.

Notes:

  • Code snippets and screenshots are central to understanding the solutions and outstanding mobile issue.

Status: Original desktop layout issue resolved; mobile sizing/centering and scoping questions remain open.

Summarized with AI on January 5. AI used: gpt-5.
4

Hi @DRAWandCARE ,

Please add below code on the head of theme.liquid file.

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code just above tag

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

1 Like