Slideshow Text Positioned Differently for Each Photo (Minimal Theme-Mobile)

shopcami
Explorer
46 0 17

Hi, can anyone let me know how to have the slideshow text positioned differently for each photo? I would like the text higher up and to the right in the first photo, higher up and to the left in the second photo, and higher up and centered in the last photo. 

shopcami_1-1625074927099.jpeg

shopcami_2-1625074946439.jpeg

shopcami_3-1625074956508.jpeg

 

I found this code in a previous post but I am unsure how to achieve these positions.

@media screen and (max-width: 768px){
.index-section.slideshow-section{position: relative;}
.slideshow__mobile-text-container{
	position: absolute;
    top: 10%;
    font-size: 12px;
	color: #fff;
}
.slides__title+.slides__btn {
    margin-top: 28px;
    line-height: 20px;
    min-height: 20px !important;
}
}

My theme is Minimal, website is https://miprinter.ca/

Thank you!

0 Likes
Pallavi
Shopify Expert
2344 394 506

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

.slides-text-content-wrapper-left {
width: auto!important;
text-align: center!important;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
shopcami
Explorer
46 0 17

Thank you for your response but that makes all the titles in the centre of the image. I am trying to find a way to have each title positioned differently.

0 Likes
Pallavi
Shopify Expert
2344 394 506

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

@media screen and (max-width: 749px){
.slides__text-content--mobile {
margin-top: 0;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes