Make Preview Popup Image Responsive

[likestuff]

Hi there,

I'm trying to get the image to be responsive in the modal popup but no matter what I try I just can't get it to work. The CSS below is what I'm using. What am I doing wrong please?

Also, is there an option to not use an iframe, I think that's what making it more difficult to style.

iframe#pdCategoryModalIframe img {
max-width: 100%;
width: 100%;
height: auto;
margin: 0 auto;
}

Thanks!

[Jan]

Hi, you need to check if this style is loaded in the iframe window at all.

[christine]

Hi,

We can say more about this when we see it live. Depends on template, bootstrap, grids etc.
Examples: .... display: flex, display: grid etc.

Kind regards
Christine

[likestuff]

Hi, you need to check if this style is loaded in the iframe window at all.

I checked via the web developer tool and the style is not showing. Why is that please?

Thanks!

[christine]

Hi,

As I said, we have to see it live. Which template are you using?

Try this:

Code: Select all

.modal-content {

width: 100%;
flex-direction: column;
display: flex;
position: relative;
}

Kind regards
Christine

[likestuff]

Sorry I did not want to post the URL as it's not my website I am just assisting to try and fix this for them.

The code you provided did not work. I didn't realize making the image in the iframe would be so difficult.

The template I am using is cassiopeia.

Thanks!

[christine]

Hi,

Why do you want to use your code above?

I see on a normal Cassiopeia page that it's responsive.

Perhaps check: Display detail button:
Preview Popup Window

either: Yes / Standard Popup Window
or: Yes / Modal Box

Kind regards
Christine

[likestuff]

Hi,

Sorry but maybe I'm not explaining clearly what the issue is, so I'll try again.

I am using: Preview Popup Window = Modal Box

When the popup opens, the file is larger than the popup window and I have to scroll to see the entire file.

What I would like is the file to be responsive and adjust to the size of popup window. That is why I tried using the code above in my first post.

So my question is, how do I make the image in the popup window responsive?

Thanks!