How can I stack the text over the image on mobile? Right now, the refresh theme only allows me to put the text underneath the image.
Uncheck the checkbox that says
“Show content below images on mobile”
on the slideshow section.
Here’s how it looks.
Hi @EZ7 ,
This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for solution:
Step 1. Go to Online Store → Theme → Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before :
Hope my answer will help you.
Best regards,
Victor | PageFly
Thank you! That worked. I would also like to try displaying the container on mobile as well, with the text being displayed over the image, is that possible?
This should work for you.
Keep the “Show content below images” checked.
then edit code and go to the file “component-slider.css”
On line 133 of this file
replace the original code ..
.slider.slider–everywhere .slider__slide {
margin-bottom: 0;
scroll-snap-align: center;
}
with the code below
..
.slider.slider–everywhere .slider__slide {
margin-bottom: 0;
scroll-snap-align: center;
flex-direction:column-reverse;
}
Now the image comes below the text
That did not work, is there any other way?
Yes, you can give it a background with and body, it will look like on desktop. If you want like image i attached, you can try this code:
@media (max-width: 750px){
.slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient.slideshow__text--left.slideshow__text-mobile--center {
background: rgb(54 46 46 / 50%);
width: 50%;
height: 80%;
border-radius: 20px;
}
}
That worked great! One last thing, how can I make it the same color scheme as it is on desktop?
You can try this code below:
@media (max-width: 750px){
.slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient.slideshow__text--left.slideshow__text-mobile--center>* {
color: black
}
.slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient.slideshow__text--left.slideshow__text-mobile--center>div>a {
background: #5271ff;
color: white
}
.slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient.slideshow__text--left.slideshow__text-mobile--center>div>a:after {
box-shadow: unset;
}
.slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-background-1.gradient.slideshow__text--left.slideshow__text-mobile--center{
background: rgba(255, 255, 255, 0.95) !important;
}
}
The colors are correct now but the width and height are too large, is it taking up the entire screen, how can I change those?
You can try this code:
Where do I put that code?
You can paste code before on theme.liquid
It’s exactly the way I want it on mobile now, but now the desktop proportions are wrong. Is there a way to make it so that it only affects the mobile view?
You can replace my code on previous answer by the code below: