Hey there, I found a couple potential solutions for this in old forum posts but nothing has worked for me thus far. I’m using full width easy sliders at the top of each sub page to display the page’s titles (About, Gallery, etc). They look great on desktop, but strange things start happening on mobile/tablets. On tablets the text is a bit too large, and on mobile the titles aren’t appearing at all (this is the most important issue).
I’m using a few Quick CSS codes that are changing up the home page banner titles/captions (.avia-slideshow, .avia-caption, and .avia-caption-title) but I tried manipulating them and they don’t seem to be controlling the other banners. Are the full width banners controlled separately? Any idea how to get the sub page banner titles to appear on mobile devices (in a left-aligned location like the desktop version)? I also tried editing the form element (caption positioning) on the page itself (changed from “Bottom without frame” to others) and the caption does appear on mobile but is in the wrong position or cut off (and this changes the appearance of the desktop version too, which for now is perfect when set at “Bottom without frame”).
Any help would be much appreciated! Thanks a lot.
Hi Nomodic!
Add this to your custom CSS.
@media screen and (max-width: 500px) {
.slideshow_align_caption { padding: 0px !important; }
}
Regards,
Elliott
Thanks a lot Elliot. That made the titles visible, they just needed to be moved down a bit more. Below is the final custom CSS code:
@media screen and (max-width: 500px) {
.slideshow_align_caption { padding: 0px !important;
bottom: -8px;}
}
Thanks again!