How can I adjust the multicolumn heading size in dawn theme for mobile view?

Topic summary

A user encountered an issue where the multicolumn section heading in the Dawn theme doesn’t resize for mobile view, unlike other sections (e.g., featured products) that automatically adjust.

Solution provided:

  • Add custom CSS targeting .multicolumn-heading with a media query for mobile devices (max-width: 767px)
  • Set font-size to desired value (example: 24px) with !important to override existing styles
  • Verify the correct class name using browser developer tools by inspecting the heading element
  • If inline styles exist in the Liquid template, those may need to be modified directly

Outcome:
The issue was resolved successfully with the provided CSS code.

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

In mobile view the Heading for multicolumn remains the same size and looks a little off.
can someone help me with code to minimize it the same as it gets reduced for other section like featured products.
Thanks in advance.

Hi @Flycoy

First, ensure that the class name .multicolumn-heading is accurate for your theme. You can find the correct class name by inspecting the heading element on your website using the browser’s developer tools.

If you discover a different class name, be sure to replace .multicolumn-heading in the provided code with the correct one.

It is possible that the original CSS rule has higher specificity, preventing the new rule from being applied. To address this issue, use the !important keyword to give the new rule higher priority.
Here’s the code:

/* Mobile devices */
@media only screen and (max-width: 767px) {
.multicolumn-heading {
font-size: 24px !important; /* Adjust this value to your desired font size */
}
}

If you continue to encounter problems, the element might have inline styles applied to it. To verify this, inspect the multicolumn heading element using the browser’s developer tools. If you see a style attribute with a font-size declaration in the opening tag, you will need to modify the theme’s Liquid templates.

@okur90 thankyou for taking out the time to reply.
its sorted.