Dawn Theme | Change width of text area over slideshow

Store Design
,

Topic summary

A user seeks to modify the Dawn theme’s slideshow text area width and make text bold on their homepage.

Solutions Provided:

  • Width adjustment: Add CSS code to component-slideshow.css or base.css targeting .slideshow__text.banner__box with max-width: 100% and font-weight: bold
  • Multiple experts provided similar CSS solutions with slight variations in file placement

Follow-up Issue:

  • User discovered text readability problems due to transparency overlay on the text
  • Requested help adjusting the opacity percentage (currently 75%)

Additional Solutions:

  • Change text color using .slideshow__text CSS to improve visibility
  • Target heading elements (h1.banner__text, h2.banner__heading) with color: black !important

The discussion remains ongoing as the user explores opacity and color adjustments to enhance text readability over slideshow images.

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

How can I change the width of the text area (which is called subheading on the editor) over the images in the slide show? I’m using the slideshow at the top of my homepage.

Also, is there a way to make the text appear in bold?

Thanks in advance.

Website:

http://alata.pt

2

Hi @zohia
You can try follow this path:
Themes => edit code => asset => component-slideshow.css
and add this code to bottom of the file component-slideshow.css

.slideshow__text.banner__box{
max-width: 100rem;
}
3

Hi @zohia

This is PageFly - Advanced Page Builder.

You can try with this code:

Follow this:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css.

Step 3: paste below code in bottom of file → save.

.slideshow__text.banner__box {

max-width: 100% !important;

font-weight: bold !important;

}

PageFlyVictor_0-1667750154330.png
PageFlyVictor_0-1667750154330.png960×197 301 KB

Hope that my solution works for you.

Best regards,

PageFly

1 Like
4

Thank you so much, it does work. And now I notice that part of the reason why it read badly is because the text has some transparency to it.

Is there a way to fiddle with the transparency’s percentage?

5

Hi @zohia
The opacity is 75%.
You can try to add this code. Then change the color to color you want.

.slideshow__text {
color: red;
}
6

You can try with this code:
h2.banner__heading.h1, .banner__text {
color: black !important;
}