Slideshow Gallery image captions for Mobile & Smaller Devices

Site URL: https://esatto.house/dishwashers/p/45cm-compact-freestanding-dishwasher-stainless-steel-edw456s

Hi, we currently have Gallery blocks with a Slideshow Gallery within the Additional Info section of our Product pages. They display fine on desktop but the text boxes either disappear or so small you can't view all the text without a scroll bar when viewing on smaller screens.

Is it possible to scale the text, padding & margins for all our slideshow galleries as we would ideally like similar content on all of our products? Alternatively, is there a better content type you would recommend if this is not achievable? 

Thanks in advance,

Ray

On 8/24/2021 at 8:52 AM, rf_residentia said:

Site URL: https://esatto.house/dishwashers/p/45cm-compact-freestanding-dishwasher-stainless-steel-edw456s

Hi, we currently have Gallery blocks with a Slideshow Gallery within the Additional Info section of our Product pages. They display fine on desktop but the text boxes either disappear or so small you can't view all the text without a scroll bar when viewing on smaller screens.

Is it possible to scale the text, padding & margins for all our slideshow galleries as we would ideally like similar content on all of our products? Alternatively, is there a better content type you would recommend if this is not achievable? 

 

Thanks in advance,

Ray

Hi,

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
.sqs-gallery-block-slideshow .slide.loaded .meta {
    display: block !important;
    opacity: 1 !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    transform: translate(-50%,-50%) !important;
}
.sqs-gallery-block-slideshow .slide.loaded .meta * {
    font-size: 12px !important;
}
}

Hi @tuanphan I'm having a similar problem. julietmorrison.com (homepage) The slideshow shows the caption on desktop, but not mobile. Is there a way to have it display on mobile? I tried the above code and it didn't work.

19 hours ago, morgancreativeco said:

Hi @tuanphan I'm having a similar problem. julietmorrison.com (homepage) The slideshow shows the caption on desktop, but not mobile. Is there a way to have it display on mobile? I tried the above code and it didn't work.

Use this new code

@media screen and (max-width:767px) {
.sqs-gallery-block-slideshow .slide.loaded .meta {
    display: block !important;
    opacity: 1 !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
}
.sqs-gallery-block-slideshow .slide.loaded .meta * {
    font-size: 12px !important;
}
}

Do you need to increase gallery height to remove grey bar under slide?

She wants the transparent gray box beneath the words gone too, do you know how to do that? And probably let me try that

@tuanphan also, is there a way to increase the title font size on mobile? 🙂

On 9/13/2023 at 4:05 AM, morgancreativeco said:

She wants the transparent gray box beneath the words gone too, do you know how to do that? And probably let me try that

You mean top or bottom arrow?

with text size

just change 12px in the code

@tuanphan the top arrow

the text size changes all of the text, title and description. I was wondering if I could change the size of the title separately from the description.

18 hours ago, morgancreativeco said:

@tuanphan the top arrow

 

the text size changes all of the text, title and description. I was wondering if I could change the size of the title separately from the description.

I see you removed gallery on mobile. Do you still need help?