Move Slideshow Text to the Center (Sense theme)

[NicoB967]

Hi all and thanks for the support!

I'm trying to move the text from left to middle on Desktop. (see screenshot)

I already used some code for moving it out from the image, since it was covering it, here is the code:

@media screen and (min-width: 750px){
.slideshow.banner{
max-height: 800px;
}
.slideshow__media img{
object-fit: contain;
}
.slideshow:before{
padding-bottom: 41% !important;
}
}

@media screen and (min-width: 750px){
.slideshow__media.banner__media.media {
position: relative !important;
}
.slideshow__text-wrapper.banner__content {
height: auto !important;
justify-content: flex-start !important;
padding: 1rem !important;
}
.slideshow__text.banner__box {
justify-content: left;
align-items: flex-start;
padding: 0;
}
.slideshow__text.banner__box * {
color: #000000 !important;
}
}

Would it also be possible to keep the title and button fixed for all slides (just the middle text changes?)

I also tried to change the color, but it changes for all text, is there a way to choose a different color for the button text label and the other text outside?

Thank you again for the support!!

[PageFly-Henry · Accepted solution]

Hi @NicoB967 

This is Henry 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--middle-center.page-width.scroll-trigger.animate--slide-in {

    justify-content: center !important;

}

.slideshow__text.banner__box {

    align-items: center !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[Moeed]

Hey @NicoB967 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

[NicoB967]

Hi, this is the profile URL:

https://progripathleticfootwear.com/

[PageFly-Henry · Accepted solution]

Hi @NicoB967 

This is Henry 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--middle-center.page-width.scroll-trigger.animate--slide-in {

    justify-content: center !important;

}

.slideshow__text.banner__box {

    align-items: center !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[NicoB967]

Hi @PageFly-Henry, thank you so much for your reply! It worked but only for the first slide, in the second it's still on the left. Any idea why?

[Made4uo-Ribe · Accepted solution]

Hi @NicoB967 

In your base.css file find this code. 

And Change into center:

This one.

Result:

And save. 

It hard to make some change on this banner, looks it like its already over rides all the code. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[NicoB967]

Thank you @Made4uo-Ribe, it worked!