Phoca Forum

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!

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

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

Jan wrote: 04 Jul 2026, 17:55 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!

Hi,

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

Try this:
Kind regards
Christine

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!

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

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!