Can someone help me make my slideshow text look like the second image?

Store Design

Topic summary

A user seeks help formatting slideshow text to match a reference image, specifically wanting the subheading positioned above the heading with the heading displayed on a single line.

Solution Provided:

  • PageFly-Victor offers CSS code to be added to the theme’s base.css file
  • Initial code sets max-width to 100% for slideshow text elements
  • Additional code positions the banner text absolutely with -10% top positioning

Ongoing Issues:

  • After adding an extra button to the slideshow, the original CSS solution stops working
  • Victor provides updated code to accommodate the new button
  • A subsequent issue emerges where the slideshow title no longer stays on one line
  • Victor continues providing revised CSS solutions to address each new formatting problem

Status: The conversation remains ongoing as the user encounters multiple formatting challenges that require iterative CSS adjustments. Each solution involves modifying slideshow text container properties through custom CSS in the theme files.

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

Putting the subheading over the heading and making the heading one line.

Screenshot 2023-01-06 at 10.37.14 am.png
Screenshot 2023-01-06 at 10.37.14 am.png1458×620 735 KB

Screenshot 2023-01-06 at 10.37.37 am.png
Screenshot 2023-01-06 at 10.37.37 am.png2576×588 237 KB

2

Hi @brokenbannaba

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps:

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

Step 2: Search file base.css.

Step 3: Paste the below code at bottom of the file → Save

.slideshow__text-wrapper.banner__content.banner__content--bottom-center.page-width.banner--desktop-transparent, .slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-accent-2.gradient.slideshow__text--center.slideshow__text-mobile--center.aos-init.aos-animate {
    max-width: 100% !important;
}

PageFlyVictor_0-1672962672718.png
PageFlyVictor_0-1672962672718.png1238×325 447 KB

Hope that my solution works for you.

Best regards,

Victor | PageFly

3

@PageFly-Victor thank you very much, but is there any way i can put the sub title over the heading just like in the second image?

4

@brokenbannaba

You can try with this code:

.banner__text.aos-init.aos-animate {
    position: absolute !important;
    top: -10% !important;
}

PageFlyVictor_0-1672963411372.png
PageFlyVictor_0-1672963411372.png842×256 207 KB

5

Thank you! @PageFly-Victor

1 Like
6

You are welcome @brokenbannaba :blush:

1 Like
7

@PageFly-Victor Hey, sorry to bother you but i added an extra button to the slideshow, now the code that u gave me dosen’t work anymore. Is there any way i can fix this?

8

Hi @brokenbannaba

You can try again with this code:

.slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-accent-2.gradient.slideshow__text--center.slideshow__text-mobile--center {
    max-width: 100% !important;
}
.banner__text {
    position: absolute !important;
    top: -10% !important;
}

PageFlyVictor_0-1672990402101.png
PageFlyVictor_0-1672990402101.png1108×397 456 KB

9

Bro sorry to bother you again but the same thing happened and now my slideshow title dosent stay in one line. Could you please help me with this?

10

@brokenbannaba

Don’t worry, you can use this code.

.slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-accent-1.gradient.slideshow__text--center.slideshow__text-mobile--center {
max-width: 100% !important;
}
1 Like