Solved

How can I format slideshow text into two lines?

lauhug
Tourist
9 0 3

Hi, I was wondering how I could make my text in the slideshow on 2 lines?

This is the link to my store: https://redfroglab.myshopify.com/

The password is: redgrenouille

 

Thank you

 

Screenshot 2024-02-22 at 12.06.20 PM.png

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
2038 589 463

This is an accepted solution.

Hey @lauhug,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

<style>
@media only screen and (min-width: 750px) {
    .slideshow__slide[aria-label="2 of 5"] .banner__text.rte p {
        max-width: 200px !important;
    }    
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1708623040800.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 5 (5)

BrewBrains
Shopify Partner
127 21 25

Hi @lauhug, You need some customization on the code. You'll need to adjust the text so that it spans two lines. You might need to add a line break <br> tag or wrap the text before, in a <div> and the text after, in another. 

Was I helpful?

Buy me a coffee


Sandesh Paudyal |

| Shopify Partner


Need help with your store?

 sandeshpaudyal99@gmail.com

For quick response - Message Me : +9779851353732

ThePrimeWeb
Shopify Partner
2038 589 463

This is an accepted solution.

Hey @lauhug,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

<style>
@media only screen and (min-width: 750px) {
    .slideshow__slide[aria-label="2 of 5"] .banner__text.rte p {
        max-width: 200px !important;
    }    
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1708623040800.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
lauhug
Tourist
9 0 3

Thank you, it works!

And if I want to apply it to other slides, do I just add the lines of the code below like this:

 

<style>

@media only screen and (min-width: 750px) {

.slideshow__slide[aria-label="2 of 5"] .banner__text.rte p {

.slideshow__slide[aria-label="3 of 5"] .banner__text.rte p {

.slideshow__slide[aria-label="5 of 5"] .banner__text.rte p {

max-width: 200px !important;

}

}

</style>

 

?

ThePrimeWeb
Shopify Partner
2038 589 463

Then you will do 

<style>
@media only screen and (min-width: 750px) {
    .slideshow__slide[aria-label="2 of 5"] .banner__text.rte p,
    .slideshow__slide[aria-label="3 of 5"] .banner__text.rte p,
    .slideshow__slide[aria-label="5 of 5"] .banner__text.rte p {
        max-width: 200px !important;
    }    
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
lauhug
Tourist
9 0 3

Yes perfect, thank you!