Dawn theme - reduce size of homepage image banner text container

Store Design

Topic summary

A user seeks to reduce the width of their homepage image banner text container to approximately half its current size, aiming to condense the text description into 2-3 lines.

Solutions Proposed:

Multiple developers offered CSS-based solutions with varying approaches:

  • PageFly-Victor: Suggested adding custom CSS to theme.liquid above the </head> tag, targeting the banner content box with width restrictions
  • dmwwebartisan: Recommended adding code to the bottom of the CSS file with width: 50% and min-width: auto !important
  • GemPages Support Team: Provided similar guidance to paste code in theme.liquid before </head>
  • infoatcodelab7: Offered a media query solution in base.css targeting screens wider than 1199px, setting width to 30%

Outcome:

The user confirmed the solution works, though it’s unclear which specific approach was ultimately implemented. All solutions target the same banner element using CSS to constrain container width.

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

Hello all - thank you so much for the help you provide!

I would like to make the container that holds the text on my homepage image banner approximately 1/2 as wide as it currently is, which would make the text description wrap into 2 or 3 lines.

Untitled.jpg
Untitled.jpg1090×671 102 KB

Site is https://michelle-masters-topiary-art.myshopify.com/

Password: auggul2

2

Hi @mmstudio

This is Victor from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Victor | PageFly

3

HI @PageFly-Victor - I added the code as below but there was no change. Did I put it in the right place?

Screen Shot 2023-04-04 at 8.43.13 PM.png
Screen Shot 2023-04-04 at 8.43.13 PM.png929×300 36.8 KB

4

@mmstudio

Please add the following code at the bottom of your css file.

#Banner-template--18019841179963__image_banner .banner__content > .banner__box{
    width: 50%;
    min-width: auto !important;
}
1 Like
5

Hi @mmstudio
Please try this, the code from the has the most priority.
You can replace the current code you have added with this one
1 Like
6

Hello @mmstudio ,

It’s the GemPages Support Team and we are glad to assist you today!

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1680676466723.png
GemPages_0-1680676466723.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

Let us know how it works for you.

Best regards,
GemPages Support Team

1 Like
7

@mmstudio

Step 1: Go to online store → Edit code

Step 2: Fine base.css

Step 3: Paste bellow code bottom of the file

@media(min-width:1199px){
  #Banner-template--18019841179963__image_banner .banner__content > .banner__box {
    width: 30%;
    min-width: auto !important;
  }
}
8

Thank you - this also works.