Jump to content

display different sized embed (Figma prototype) or website and mobile version

Recommended Posts

Hi! I am trying to display an embed of my Figma prototype on my website and it worked fine for the desktop but in the mobile version, it is way too big to be properly displayed. I tried to follow some responses to similar questions but am still having trouble. Right now I have:

$(document).ready(function() {

if ($(window).width() > 766) { $('body').append('<iframe style="border: 0px solid rgba(0, 0, 0, 0);" width="1150" height="850" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FToXEBAtmvwtLHkJgSHBf0C%2FFlipit%3Fpage-id%3D217%253A121%26node-id%3D217-1266%26viewport%3D2344%252C651%252C0.33%26scaling%3Dscale-down%26starting-point-node-id%3D217%253A1266" allowfullscreen></iframe>'); }

else { $('body').append('<iframe style="border: 0px solid rgba(0, 0, 0, 0);" width="700" height="400" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FToXEBAtmvwtLHkJgSHBf0C%2FFlipit%3Fpage-id%3D217%253A121%26node-id%3D217-1266%26viewport%3D2344%252C651%252C0.33%26scaling%3Dscale-down%26starting-point-node-id%3D217%253A1266" allowfullscreen></iframe>'); } });

 

Right now both of the sizes are being displayed instead of following the if statement. If anyone is able to help at all I'd really appreciate it! 

Thank you!

Link to comment
  • Replies 1
  • Views 463
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.