Hi, I love how my slideshow looks on my desktop version but when viewing on the mobile version, the text is in the center of each image. Is there a code I can add to make my the text match what it looks like on desktop?
Website: www.coastalvibescandles.com
Thank you!
Hi @CoastalVibes it seems to change much on this. Actually, your theme has two text containers one for desktop and one for mobile. I have changed the text position to this if you like.
@CoastalVibes
Hello,
media screen and (max-width: 719px){
.slider__controls-container {
position: absolute;
bottom: 0;
width: 100%;
}
.slideshow__mobile-text-container {
position: unset !important;
top: 0 !important;
}
}
Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid
Like This
Hello @CoastalVibes , welcome to the community!
This is Layoutbase here, we’d also like to recommend a quick code solution:
Go to Shopify Admin > Online Store > Theme > Customize > Edit code
Left Menu > Find folder - Asset > locate and select file {/} theme.scss
At the bottom of the page, paste the follow:
@media(max-width: 719px){
.slideshow__mobile-text-container {
display: none!important;
}
.index-section.slideshow-section .flexslider .slides {
font-zize: 10px;
}
index-section.slideshow-section .flexslider .slides .slides__btn,
index-section.slideshow-section .flexslider .slides .slides__title {
display: block;
}
}
Hope this works for you, and let us know if you require further assistance. Happy building 
Unfortunately that deleted the text from my slideshow completely, on mobile view.
Hi, thank you for your reply however I would like the text to show exactly how it does on my desktop view. It alternates from left to right throughout the different slides.
Yes, this is what I want! I would like the text to look exactly like this on each slide. The text alternates from left to right throughout the different slides. Could you please provide the code I need to enter to achieve this?
as i earlier mentioned your theme uses different techniques for displaying text on mobile and desktop. if your slides are fixed I can send the code to on each slide for mobile view.
Try this code in the CSS file
[data-mobile-slide-text="0"], [data-mobile-slide-text="0"] h2,[data-mobile-slide-text="2"], [data-mobile-slide-text="2"] h2,[data-mobile-slide-text="4"], [data-mobile-slide-text="4"] h2 {
text-align-last: end !important;
text-align: end !important;
margin-right: 0 !important;
}
[data-mobile-slide-text="1"], [data-mobile-slide-text="1"] h2,[data-mobile-slide-text="3"], [data-mobile-slide-text="3"] h2 {
margin-left: 0 !important;
text-align: start !important;
text-align-last: left !important;
}
This worked! Thank you SOOO much! The buttons/text are slightly large now. Is there anyway to change the size on mobile only?
Hi you can try this code for mobile font size
@media only screen and (max-width: 768px){
.slides__title--mobile {
font-size: 17px;
width: 64%;
margin: auto;
}
}
You can increase/decrease value 17 to your choice. The second value 64% is the width of the text. block.
@Ahsan_ANC You ROCK! This helped so much. I greatly appreciate your assistance!
I tend to change my home page pictures a lot to showcase new product. From your original code, listed below, which numbers would I change to move the side the text is showing on (left vs. right)? I recently changed my first slideshow picture, and on mobile, the text is showing on the incorrect side.
[data-mobile-slide-text=“0”], [data-mobile-slide-text=“0”] h2,[data-mobile-slide-text=“2”], [data-mobile-slide-text=“2”] h2,[data-mobile-slide-text=“4”], [data-mobile-slide-text=“4”] h2 {
text-align-last: end !important;
text-align: end !important;
margin-right: 0 !important;
}
[data-mobile-slide-text=“1”], [data-mobile-slide-text=“1”] h2,[data-mobile-slide-text=“3”], [data-mobile-slide-text=“3”] h2 {
margin-left: 0 !important;
text-align: start !important;
text-align-last: left !important;
}
Hi, @CoastalVibes if you are comfortable working with code. here is a simple guide. you can remove the previously added code.
here is the slide selector with the left align setting of the text.
[data-mobile-slide-text="0"], [data-mobile-slide-text="0"] h2, {
margin-left: 0 !important;
text-align: start !important;
text-align-last: left !important;
}
For the slide numbering, it starts with 0. above code will work perfectly for the slides with the image on right.
[data-mobile-slide-text="1"], [data-mobile-slide-text="1"] h2 {
text-align-last: end !important;
text-align: end !important;
margin-right: 0 !important;
}
The above code will work for the slide with the image on left. you just need to change the slide number within quotation marks.
Add these CSS blocks repeatedly for every slide. if image is on left side add second code block and give a slide number.
I hope it will not work as it is difficult to understand. just tell me I will make a video guide for you on how to do that