How to Center the Slide Title in Slideshow - Narrative Theme

Solved
Highlighted
Excursionist
22 0 11

I have added a slideshow title "Scroll down to explore" on my homepage slideshow.

 

It is appearing left aligned - I would like to center it under the slideshow heading text.

 

The site is www.sweetviolet.co.

0 Likes
Highlighted
Shopify Partner
9413 1186 3297

@SweetViolet 

Thanks for post.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.slideshow__buttons
{
-webkit-flex-direction: column-reverse;
    -moz-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
Excursionist
22 0 11

That's great - it worked, but when I switch over to mobile, it is pushed to the right so the words are cut off. I think this is why it is set up to be on the left - so that you can see it on mobile devices.

 

Is there any way to push it to the left on mobile but keep it in the middle on desktop?

Highlighted
Shopify Partner
9413 1186 3297

This is an accepted solution.

@SweetViolet 

Thanks for the update.
please update below code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (min-width: 750px) {
.slideshow__buttons {
    -webkit-flex-direction: column-reverse;
    -moz-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
Excursionist
22 0 11

Do I need to add this code as well or replace the other code with it?

Highlighted
Shopify Partner
9413 1186 3297

just replace previous code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
Excursionist
22 0 11

Absolutely perfect - thank you!

Highlighted
Tourist
19 0 1

Hi @KetanKumar 

May i know how to adjust my title to center including the  click label?

my url: https://www.dearestone.co/

theme : debut

pass:frayro

Screenshot 2020-11-12 at 12.45.14 AM.jpg

0 Likes