How to reduce the size of the text box in your image banner

Shopify Discussion

Topic summary

A Shopify store owner is experiencing an issue where text in their image banner overlaps with product images (specifically straws). They need to reduce the text box size to prevent this overlap.

Proposed Solution:
A CSS code snippet was provided to adjust the banner text box width:

  • Sets maximum width to 60rem for desktop
  • Adjusts to 50rem and 50% width for screens under 1149px
  • Code should be added to the theme’s CSS file (base.css, style.css, or theme.css)

Current Status:
The solution worked for desktop view but created new problems on mobile devices. The issue remains unresolved for responsive design.

Additional Note:
One commenter pointed out that the “Shop Now” call-to-action button lacks a link, which should also be fixed.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

hello everybody… my website is kickthathicc.com… as you can see in the image below the first banner the text box overlaps the product… and the second banner is okay. I just need a way to reduce the size of the text box in the image banner so that the text doesn’t overlap with the straws.

Screenshot 2025-05-01 121302.png
Screenshot 2025-05-01 121302.png2732×1888 472 KB

if anybody has a solution it would be much appreciated and i will be sure to like and accept your post.

2 Likes
2

It’s something easy to do you highlight the text to increase the size and when checking out your store I saw that you didn’t add any link to the CTA” shop now” You should fix that too

3

Hi @kickthathicc

Check this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
div#Banner-template--24316128493847__image_banner_CWqGtY .banner__box.content-container {
    max-width: 60rem;
}
@media only screen and (max-width: 1149px){
div#Banner-template--24316128493847__image_banner_CWqGtY .banner__box.content-container {
    max-width: 50rem;
    width: 50%;
}
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
4

Thank you… this worked for me

5

this actually worked for desktop but it ruined the mobile version