How Can I Make Custom Liquid Embed Content (Not A Video) Responsive?

Store Design
, , ,
1

Hi, I have added an embed code to my website from custom liquid template and it is fixed size, not responsive, I want to make it responsive. I don’t know coding, I don’t know where to find it exactly, in Templates or in Sections, nor I know what to change, although I searched and found some solutions.

Please help - my website

2

Hey @Lazare

You can place this code to the very bottom of this custom liquid code

Hopefully, it will help you. If yes then Please don’t forget to hit Like and Mark it as the solution!

1 Like
3

Hello @Lazare

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.section-template--17574546276566__custom_liquid_WXBRgW-padding iframe { width: 100%; }

techlyser_web_0-1709970203853.png
techlyser_web_0-1709970203853.png1307×443 928 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

4

Hey!

It worked but from smartphone, when zooming in and moving, it starts to disfunctionally zoom and move. This is not happening on desktop but I need it do work on smartphone as well ://

5

firstly please accept the solution and like it…and I’m trying to do resolve the problem.
Thanks

6

Sadly I don’t know where the liquid file is in code, can I put that code you provided for me in Custom CSS from website editing space?

Thanks!

7

Yes I was going to of course in the end but here it is no prob :wink:

8

you have to do work on script part.

9

What do I need to do ??

10

Thank you in advance!

11

I will mark your answer as solution if you solve me the problem.

12

I’m trying to find the solution what you want, But I am not able to find the solution to your problem.
Sorry for that.

13

Ok.

14

Hey man!

This is the website link where the code is provided - https://embed.windy.com/config/map

and on this website, it does not glitch from mobile !

Please try there and then try on my website with your phone

15

ok I’ll check if I get the solution I will defiantly do reply you.

16

Of course, no worries, but please let me know, if you solve it, I will give you a review also!

Let me know if you could not find the solution please.

17

sure

Thanks

18

Add this CSS maybe it works

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px){ iframe { overflow: hidden; } }
19

Noo :////

As long as I zoom in, it starts disfunctioning:// Please you try too from mobile :confused:

20

Hey did you tell me to use this code AND the code you wrote previously? Because I used THIS LAST ONE now only.

And hey, see this please - https://developers.video.ibm.com/player-api-examples/responsive-embed/ - It is about making embed code responsive but don’t know for sure, please check it.