How can I format text on my homepage image to appear on separate lines?

Store Design
, ,

Topic summary

Goal: Make the homepage “image with text” heading display as three fixed lines (REDUCE WASTE. / EAT SEASONALLY. / EVERY WEEK.) instead of wrapping differently with zoom or viewport changes.

Context: The text currently reflows based on screen size/zoom. User wants each sentence on its own line consistently.

Steps taken:

  • Helpers requested the store URL; the user provided https://wonkybox.nz/.
  • A CSS fix was suggested: add a rule in base.bundle.css targeting the section’s H2 (via a specific #shopify-section… selector) with max-width: 470px and centered margins to force line breaks via narrower width.

Latest update: After adding the CSS at the bottom of base.bundle.css, the appearance did not change. The user shared a screenshot of the code placement and asked if it was implemented incorrectly.

Notes: Screenshots were provided to illustrate both the text behavior and code placement; these are central to understanding the issue.

Status: Unresolved. Awaiting further troubleshooting or an alternative approach; no confirmed fix or decision yet.

Summarized with AI on February 3. AI used: gpt-5.
1

I have an image with text on my homepage and would like to create new lines for the sentences instead of having one long sentence that wraps. Here’s a picture:

4ACD8AE7-96D9-414F-986B-78B257047A07.jpeg
4ACD8AE7-96D9-414F-986B-78B257047A07.jpeg1458×1318 106 KB

If anyone zooms in or out of the page, the amount of words on each line changes. I would LOVE each sentence to be on a different line so:

REDUCE WASTE.

EAT SEASONALLY.

EVERY WEEK.

Is this possible?

1 Like
2

@Katiejackson41

oh sorry for that issue can you please share store url

1 Like
3

Hi,

Please share your store URL and if your store is password protected then also provide password too.

Thank you.

1 Like
4

Hi there!

My URL is: https://wonkybox.nz/

Thanks!

1 Like
5

@Katiejackson41

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.bundle.css ->paste below code at the bottom of the file.
#shopify-section-template--15916596134050__1650891033bae15b05 h2 {
    max-width: 470px;
    margin: 0px auto;
}
6

Hi Ketan,

Unfortunately it’s still the same. Here is a screenshot of the code in as you mentioned:

784A0EE9-5B8D-430F-8FE9-32A566718F08.jpeg
784A0EE9-5B8D-430F-8FE9-32A566718F08.jpeg2818×1548 261 KB

Have I done it incorrectly?

www.wonkybox.nz

Thanks for your help!