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

Lazare
New Member
12 0 0

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 

Replies 19 (19)

deepaksharma
Shopify Partner
448 62 91

Hey @Lazare 

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

 

 

 

<style>
iframe {
    width: 100%!important;
}
</style>

 

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

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com
Lazare
New Member
12 0 0

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!

Lazare
New Member
12 0 0

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

techlyser_web
Shopify Partner
1410 263 278

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 </body> on theme.liquid
<style>
  .section-template--17574546276566__custom_liquid_WXBRgW-padding iframe {
       width: 100%;
   }
</style>

techlyser_web_0-1709970203853.png

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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Lazare
New Member
12 0 0

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 ://

techlyser_web
Shopify Partner
1410 263 278

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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Lazare
New Member
12 0 0

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

techlyser_web
Shopify Partner
1410 263 278

you have to do work on script part.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Lazare
New Member
12 0 0

What do I need to do ??

Lazare
New Member
12 0 0

Thank you in advance!

techlyser_web
Shopify Partner
1410 263 278

 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.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Lazare
New Member
12 0 0

Ok.

Lazare
New Member
12 0 0

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

techlyser_web
Shopify Partner
1410 263 278

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

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Lazare
New Member
12 0 0

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.

techlyser_web
Shopify Partner
1410 263 278

sure

Thanks

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
techlyser_web
Shopify Partner
1410 263 278

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 </body> on theme.liquid
<style>
@media screen and (max-width: 767px){
  iframe {
     overflow: hidden;
  }
}
</style>

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
Lazare
New Member
12 0 0

Noo ://// 

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

Lazare
New Member
12 0 0

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.