Maintenance of aspect ratio in toggle

Hello, I am trying to create a modal that contains a 16 x 9 video when the toggle is clicked. This toggle is sitting a grid cell on a 2 column, ultimately, 13 row grid.

I want the toggle to display as a thumbnail of the video which, obviously is also 16 x 9 aspect. When I choose Graphic and then Image for the toggle, I choose a thumbnail image which is 1600 x 900 mm.

When I add the image to the toggle, the toggle adjusts its width to the cell width (i.e. 100% of the cell width) but the height remains unconstrained, including when I change screen widths (i.e. mobile, etc).

In the attached images, you’ll see the modal in the column marked Test 1 and the video added as a video element directly into the cell in Test 2.

As you work through the different images, representing the break points on the edit screen, you’ll see that toggle distorts, whereas the video continues to appear as a 16 x 9 shape.

I have tried all sorts of options but cannot solve this one. I would love your assistance on this one if you can.

The web address for the page is www.25words.au/sb-s1

Hello @untypical,

Thanks for writing in! By default, the toggle image covers the entire toggle area. To force it to a 16x9 ratio, you can insert this CSS tweak in your Modal element’s Custom Inline CSS:

$el.x-anchor .x-graphic {
  max-width: 100%;
}

This should display as follows:

Best Regards.

Hello @ruenel - thanks. That has fixed it!

Much appreciated

You are most welcome, @untypical.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.