Can I split my H2 heading into two separate lines?

Store Design

Topic summary

A user wants to split an H2 heading into two separate lines on their Shopify store, allowing for a line break within the heading text.

Solution Provided:

  • Another user shared CSS code to be added to assets/theme.scss.liquid
  • The code targets specific section IDs and applies max-width and margin properties with media queries for mobile screens (max-width: 749px)

Outcome:

  • Initially, the original poster reported the code didn’t work
  • Upon correction, they confirmed the CSS solution successfully resolved the issue

Note: The conversation contains reversed/garbled text in several places, but the core technical exchange about implementing CSS for heading line breaks is clear.

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

hi everyone,

Is there anyway I can seperate my h2 heading (see pic below) into 2 seperate lines?

I would like to be able to type some words then press return to start a new line. Is this possible with h2 headings?

my preview link is below.

https://ektxwlfh6slpgdbz-54993551588.shopifypreview.com

thank your for your time and effort.

Screen Shot 2022-12-08 at 3.33.43 pm.png
Screen Shot 2022-12-08 at 3.33.43 pm.png3338×1692 431 KB

2

@Timstar

Please add the following CSS code to your assets/theme.scss.liquid bottom of the file.

@media only screen and (max-width: 749px){
#shopify-section-template--16533096136932__1652163694e1f06b9b h2, #shopify-section-template--16533096136932__1652163694e1f06b9b .h2 {max-width: 85% !important;margin: 0 auto !important;}
}

Thanks!

3

Thank you for your time replying. But this code didn’t change anything.

Do you have any other suggestions please?

4

Sorry my mistake. It did work. Must have copied it wrong. Thanks for your solution. Appreciate it.