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

SpaceRings
Tourist
4 0 0

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!

MobileMobileDesktopDesktop

0 Likes

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

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes

@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;
}
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
SpaceRings
Tourist
4 0 0

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.

 

Screenshot (688).png

0 Likes
sarahalaska
Tourist
23 0 0

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

0 Likes
rbdtechworld
Excursionist
29 6 15

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

0 Likes
sarahalaska
Tourist
23 0 0

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?

0 Likes
rbdtechworld
Excursionist
29 6 15

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

0 Likes
sarahalaska
Tourist
23 0 0

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

 

image.png

0 Likes

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!!!!!

 

image.png


 

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit