Solved SP Page Builder

Image Modal Selector in sppb-modal

Asked by Stephane Hanrez 1 year ago Last activity 1 year ago

Hi,

When using image as a modal selector in sppb-modal, how do I see the height or widght of the image ? The rendered size is way too big for me, even if I upload a 100x100 pic... even worse on my mobile website where for some reasons, it's rendered bigger as on my desktop version.

It's seems to have 512x512 attributes ;-/

img[Attributes Style] {
    width: 512px;
    aspect-ratio: auto 512 / 512;
    height: 512px;
}

Thanks
Stéphane

Accepted answer

Marked as the solution

Asfakur Rahman Saikat Staff

1 year ago

Hi,

Please go to the addon settings> style tab > custom css > add this custom CSS

#addonId .sppb-magnific-popup{
  width: 100px;
}

and save the settings.

This should work.

2 more replies

Asfakur Rahman Saikat Staff

1 year ago

Hi Stephane,
Thank you for reaching out, and I am sorry for the inconvenience.

Currently, there isn’t an input option for setting the height and width of the image in the modal selector. However, you can achieve this by using custom CSS, as shown in the screenshot: https://prnt.sc/GTMkyURT1leO

#addonId .sppb-magnific-popup img{
    width: 100px;
}

You can also customize the height and add media queries within the CSS for better responsiveness.

Please let me know if you need further assistance.

Best regards

Stephane Hanrez Asked this

1 year ago

Hi Asfakur,

Thanks a lot for your answer.

I tried that but that doesn't seem to work... maybe I didn't understand what to use as the addOnId.

This is the code of the image I want to set width for :

<a class="sppb-modal-selector sppb-magnific-popup" data-popup_type="inline" data-mainclass="mfp-no-margins mfp-with-zoom" href="#sppb-modal-1732529659283" id="sppb-modal-1732529659283-selector">
                <img src="https://www.4fitandfight.be/images/gdrp.png" alt="GDPR" width="512" height="512" loading="lazy"></a>

and I used this as custom css for the modal popup

#sppb-modal-1732529659283-selector .sppb-magnific-popup img{
    width: 100px;
}

What am I doing wrong ?

Thanks

Stephane Hanrez Asked this

1 year ago

Oh sorry, I thought I had to replace the ID... This works fine indeed, thanks a lot

Asfakur Rahman Saikat Staff

1 year ago

You're welcome! Please mark the answer that best addresses the user's question to close the post.