Carousel, change position of captions on mobile
-
Hello. I've made a custom phone layout of my website with a seperate carousel from my desktop version. On desktop, the captions are positioned on the carousel.
However, this does not look good on mobile. Is there a way to position the captions below the carousel on mobile, but keep them on the carousel on desktop?I've added a custom HTML class for the phone-carousel and named it "mobilecarousel" so I can target this carousel seperate from my desktop version
-
I've managed to move the captions out of the slide, however I can't change the numbers and paddings.
I've made a new text format and called it _CarouselMobile because the format used for the browser carousel don't fit the mobile version very well.
However, while the caption is now a different color and smaller text size - as needed - the numbers are still using the generel rule from Carousel settings, thus making the numbers a different color and size than the captions on phone version.
The padding is also force using the Carousel settings even though I've tried to change it for the .mobilecarousel through custom css.
This does nothing:
.mobilecarousel .lay-carousel-sink-parent .numbers { padding-bottom: 10px!important; padding-right: 10px!important; }
Here you can see that I can only change captions. The numbers are still white and larger, and the overall padding is too big compared to the image in the carousel. (I made a grey background so you can see, but ideally I need a white background)
-
can u post the link please
-
This post is deleted!
-
.single-caption{ padding-left: 0!important; } .lay-carousel-sink { display: inline-block; margin-bottom: 0 !important; margin-top: 0 !important; position: relative; width: 100%; } .mobilecarousel .lay-carousel-sink-parent { position: absolute!important; top: 0!important; margin-top: 0px!important; } .lay-carousel-sink .numbers{ padding-right: 0!important; }
in lay options -> custom css for mobile
lmk if it worked!
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it