Responsive Image for Toggle on Content Area Modal

[hivehouse]

Is there a way to make an image, used as the toggle for a content area modal, to be responsive.

At the moment, on the smallest break point, the image is cropped instead of downsizing to fit the area.

[friech]

Hi @wbgTHEMECO,

Thank you for writing in, please set your toggle’s width and height to auto then set your desired image width as max-width, that way the image will have a (set) width but then respond when the screen gets narrow.

Hope it helps,
Cheers!

[hivehouse]

Is there then a way to make the YouTube video be centered on the screen and responsive?
I have the embed code as the contents of the modal.

[friech]

Hi @wbgTHEMECO,

Yes, that is possible, wrap your iframe embed code with the following div.

<div style="position:relative;padding-top:56.25%;">
	<!-- YOUR IFRAME EMBED CODE HERE -->
</div>

and apply a class resp-iframe to your iframe embed code and remove the width and height attribute associated to it, as shown below.

<iframe class="resp-iframe" src="#" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Then add this to your Page > CSS

.resp-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

with that, your embedded video should respond to your content modal width.

Hope it helps,
Cheers!