Edit Text Box Width on Image Banner (Desktop only)

Store Design
, ,

Topic summary

A user needs to adjust the text box width on a desktop image banner to prevent text from overlaying a candle image. The goal is to position all text beside the candle rather than over it.

Proposed Solutions:

Two community members offered CSS code modifications:

  • Solution 1: Add CSS to base.css targeting .banner--desktop-transparent .banner__box with a max-width: 56rem media query for screens with minimum width of 750px

  • Solution 2: Modify base.css, style.css, or theme.css with CSS targeting the same banner elements, setting width to 50% and adjusting margin properties for screens with minimum width of 749px

Both solutions involve editing theme code files through Shopify Admin → Online Store → Themes → Edit code → Assets folder.

The discussion remains open with no confirmation of which solution worked or if the issue was resolved.

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

Hey, i got a Image Banner on Desktop. (Different one on Mobile)

Now i want to edit just the width of the text on the desktop one, so it isnt layered over the candle. All Text should be placed right besides the candle!

I really appreciate your help!

noah12x2_0-1729002906807.png
noah12x2_0-1729002906807.png1307Ă—585 194 KB

https://pb9rithagnadrdic-85421687108.shopifypreview.com

burtah

1 Like
2

@noah12x2 please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

@media screen and (min--width:750px){
.banner--desktop-transparent .banner__box{max-width: 65rem !important;}
}
3

Hi @noah12x2

TRy 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:
@media only screen and (min-width: 749px){
.banner__content.banner__content--middle-right.page-width {
    margin-right: 0;
}

.banner--desktop-transparent .banner__box {
    width: 50%;
}
}

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