How can I increase the width of the text box on a slide?

Store Design
, ,
1

Hi there!

How can I increase the size of the text box on for each slide? I have attached a screenshot of the how the text is displayed? I would like it wider so the user can read the description without scrolling. Website is powerhausva.ca.

Thanks!!!

Screenshot 2023-07-04 at 2.03.47 PM.png
Screenshot 2023-07-04 at 2.03.47 PM.png1818Ă—1272 260 KB

1 Like
2

@coolerdrinks , Hope you are doing well.

Please add the below lines of CSS code at the end of your base.css file.

body .slideshow__text.banner__box{
max-width: 95rem;
}

you can change the value of max-width as per your taste.

3

Find this file in the code overview: component-slideshow.css

Search for .slideshow__text.banner__box in the css

And change the max-width, do this for all queries.

Hope this helps, just let me know.

Thanks,

A.

4

Hi @coolerdrinks ,

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” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
.slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient.slideshow__text--center.slideshow__text-mobile--center {
    max-width: 100%;
}

Result:

Ribe_Dagandara_0-1688663670226.png
Ribe_Dagandara_0-1688663670226.png1366Ă—611 241 KB

I hope it help.

Is this the banner right? Cause it have different writing on the sample image you have.

5

Hi @coolerdrinks

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css or Theme.css

.color-background-1.gradient.slideshow__text--center.slideshow__text-mobile--center {
    max-width: 100% !important;
}

Hope you find my answer helpful!

Best regards,

Richard | PageFly