Help making embedded code responsive

Design help General
1

Hi there,
Im having trouble with making my embedded code responsive. I have just copied and pasted a line of code from a google maps tool, which shows how far the shop will deliver by hand.

The embedded code is as follows:
<iframe src="https://www.google.com/maps/d/embed?mid=1Jr0_ImpFYlTFxlnRgCxvQAjqttEsQkR2" width="1200" height="480"></iframe>

I can edit the width and height properties in this line of code, however this will be the same for all viewport sizes, ideally I would like to set the width to be 94vw, with a max width of 1200px. Does anyone know how I could achieve this?

Many thanks for your help!

Here is my site Read-Only: LINK

2

You can do this by changing the code to:

<iframe src="https://www.google.com/maps/d/embed?mid=1Jr0_ImpFYlTFxlnRgCxvQAjqttEsQkR2" width="100%" height="100%"></iframe>

And then setting the actual embedded block element’s properties to suit your design.

1 Like