0
Answered

ISSUES WITH OPTIMIZATION FOR MOBILE DEVICES: TEXT OF HOME PAGE SLIDESHOW

admin 5 months ago updated by jacqueems 5 months ago 3

Hi! I read all the Q &As on similar topics and was able to optimize my website for mobile devices to a large extent by adjusting the size of the columns in "mobile view" mode. Yet, I have not succeeded in adjusting the text of the slide show that comes in the Inspiration named "Prima". 

Under GALLERY SETTINGS, caption type is h2. It looks great on the computer, but the text looks gigantic on mobile devices (shown at the bottom of the images in big grey boxes) and I do not find the way to edit it, neither to see it using the mobile view when editing the page. I tried each of the available caption types and none works well on both, computer and mobile devices (either the text for each image is shown well in one but not in the other). How can I adjust the captioning of images in a slide show so it looks well on both computer and mobile devices? Thank you

Answer

Answer
Answered

Thanks for contacting us.

Unfortunately, there currently aren't controls to change font size based on screen width for the galleries.


You can add the following using Customize > Advanced > Custom JS & CSS.

@media (max-width: 767px) {
.wc-gallery .gallery .gallery-item .gallery-caption h2 {
font-size: 36px;
}
}


I hope this helps.

GOOD, I'M SATISFIED

Thank you. Although I had to make further adjustments, your instructions were very helpful!

Could you please tell me how to replace the bar on the heading in the template/inspiration Primas? I wish to insert a custom designed bar as an object/picture/image instead. 

Satisfaction mark by admin 5 months ago
Answer
Answered

Thanks for contacting us.

Unfortunately, there currently aren't controls to change font size based on screen width for the galleries.


You can add the following using Customize > Advanced > Custom JS & CSS.

@media (max-width: 767px) {
.wc-gallery .gallery .gallery-item .gallery-caption h2 {
font-size: 36px;
}
}


I hope this helps.

Hi, I will try your suggestion above. I am no IT expert, so to be sure that I understand: this would adjust the font size to be displayed on mobile devices so it does not look as big as on the computer? 

Yes. It only applies to mobile screen sizes.