Image Modal Selector In Sppb-modal - Question | JoomShaper
Back to the questions

Image Modal Selector In Sppb-modal

Stephane Hanrez

Stephane Hanrez

SP Page Builder 11 months 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

0
5 Answers
Order by
Oldest Newest Votes
Asfakur Rahman Saikat
Asfakur Rahman Saikat
Accepted Answer
Support Agent 11 months ago #176095

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

0
Stephane Hanrez
Stephane Hanrez
Accepted Answer
11 months ago #176279

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="/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

0
Asfakur Rahman Saikat
Asfakur Rahman Saikat
Accepted Answer
Support Agent 11 months ago #176309

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.

0
Stephane Hanrez
Stephane Hanrez
Accepted Answer
11 months ago #176313

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

0
Asfakur Rahman Saikat
Asfakur Rahman Saikat
Accepted Answer
Support Agent 11 months ago #176383

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

0