Balance theme - how to make the header text box wider in image with text

Store Design
,

Topic summary

A user working with Shopify’s Balance theme needed to widen the text box in the “Image with Text” section, which was too narrow for their content.

Solutions provided:

  • Layout adjustment: The Image with Text section uses a default 50/50 split between text and image. The text area can be widened by adjusting layout settings, though this reduces image size.

  • Alternative section: For text overlaying images, switching to the Image Banner section was suggested as a better option.

  • CSS solution: A custom CSS code snippet was provided to reduce padding and effectively widen the text box:

.image-with-text__text-item.grid__item > div {
    padding-inline: 5px !important;
}

The CSS approach successfully resolved the issue. The user confirmed it worked as needed.

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

I’m using the balance theme and the image with text has a heading text box that is just not wide enough. Anyway to change that? Thank you!

tzyz75_0-1736971560051.png
tzyz75_0-1736971560051.png1126×813 151 KB

1 Like
2

Hi @tzyz75 ,

Please share the url

3
4

Hi @tzyz75

The Image with Text design is a 50% text - 50% image layout by default.

  • To make the text wider, you can adjust the layout settings so that the text occupies more space, which will make the image smaller.
  • If you prefer a design where the text overlays the image, consider using the Image Banner section instead. This allows the text to sit on top of the image, creating a visually dynamic look.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
5

Hi @tzyz75

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
.image-with-text__text-item.grid__item > div {
    padding-inline: 5px !important;
}

Here is the result:

image_720.png
image_720.png719×206 66.5 KB

I hope this helps

Best,

Daisy

1 Like
6

Thank you very much, that worked!