How to move slideshow text and button on top of the slideshow on mobile? (using Minimal Theme)

[SpaceRings]

Hi 
I'm having trouble on moving the slideshow text and button on top of the slideshow on the mobile format. The desktop format is exactly what i like but i can't replicate that on mobile.
Any help will be appreciated thanks!

MobileDesktop

[oscprofessional]

Hello @SpaceRings ,
This is seems to be CSS work , needs to get fixed in to your default theme css.

[oscprofessional]

@SpaceRings,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

@media screen and (max-width: 749px) {
 .index-section.slideshow-section {
	display: flex;
	flex-direction: column;
}
#flexslider--slider {
	order: 2;
}
.slider__controls-container {
	order: 3;
}
.slideshow__mobile-text-container {
	order: 1;
}
}

[SpaceRings]

Hi @oscprofessional after putting the code in, the text is placed on top of the slideshow in mobile format, instead of actually being on the slideshow.

It was my fault that i didn't correctly specify that I wanted the text directly on top of the slideshow rather than being place above it. My apologies.

[sarahalaska]

Did you find an answer to this? I am wondering exactly the same thing. 

[rbdtechworld]

Hi,

open your theme.scss file and copy below code and paste in theme.scss file

@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;
}
}

Thanks & Regards
rbdtechworld

Would like to add new functionality or customize an existing one, please hire us.
If helpful then please Like and Accept Solution .
Email: developer9it@gmail.com

[sarahalaska]

Thank you! I can see that it moved up where I would like for it to be, but it just flashes and then disappears completely. Suggestions?

[rbdtechworld]

Hi,

now used again

@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; z-index: 9999; }
.slides__title+.slides__btn {    margin-top: 28px;    line-height: 20px;    min-height: 20px !important; }
}

Thanks & Regards
rbdtechworld

Would like to add new functionality or customize an existing one, please hire us.
If helpful then please Like and Accept Solution .
Email: developer9it@gmail.com

[sarahalaska]

It works!!!!!! YAYYYY!!!!!! Any way to get the button background to extend???? THANKS!!!!!

[oscprofessional]

Hello @sarahalaska,

Please share your site url so that I will give you exact solution

---

@sarahalaska wrote:

It works!!!!!! YAYYYY!!!!!! Any way to get the button background to extend???? THANKS!!!!!

---