How to center headings on multicolumn sections Dawn theme

Store Design
, ,

Topic summary

A user seeks to center multicolumn section headings on mobile devices only in the Dawn theme (version 2.0.0).

Solutions Provided:

Two approaches were offered:

  1. GemPages Support: Suggested adding custom code before </body> in the theme.liquid file (specific code appears garbled in the original post)

  2. dmwwebartisan: Recommended adding CSS to assets/section-multicolumn.css:

@media only screen and (max-width: 749px) {
  .multicolumn .title {
    margin: 0 auto !important;
  }
}

Resolution:

The user confirmed that one of the solutions successfully resolved the issue. The CSS approach targets mobile viewports (max-width: 749px) and centers the heading using auto margins.

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

How would i go about this heading on multicolumn sections being centered ON MOBILE ONLY?

Screenshot 2022-12-12 121654.png
Screenshot 2022-12-12 121654.png724×670 34.1 KB

I’m on an older version of the Dawn theme. You can see this multicolumn sections on my page here: https://teefiti.dk/pages/om-os Its near the bottom of the page. To login use: Teefiti2022

1 Like
2

Hello @MetteT

It’s GemPages support team and glad to support you today.

I would like to give you a solution to support you:

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

GemPages_0-1669618959296.png
GemPages_0-1669618959296.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before :

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

2 Likes
3

@MetteT

Please add the following CSS code to your assets/section-multicolumn.css bottom of the file.

@media only screen and (max-width: 749px){
.multicolumn .title { margin: 0 auto !important;}
}

Thanks!

4

@GemPages Thank you! that did the trick :slightly_smiling_face:

5

Hello @MetteT ,

I am glad that my solution is helpful to you :grin: .