Jump to content

Figma embed won't change constraints in mobile mode.

Recommended Posts

Site URL: https://www.tbias.design/home/pay-the-poet

Hello! 

 

I am creating a portfolio for UX Design. Currently, things are looking great but I need to fix some kinks that have been giving me issues. I'll explain. 

I embedded my figma prototype into the case study. Here's the link: https://www.tbias.design/home/pay-the-poet. It's in the 'Prototype' section. The embedded code looks great in web mode. However, it's not responsive, when the window is smaller or in mobile mode. Here's the code that I use: 

<html>
<head>
<style>
#content {
width: 1000px;
margin: auto;
height: 100%;
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div id="content">
<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="1000" height="700" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FlF7wLxKJ00VAAQ9Q8QcOot%2FFinal-MVP-Pay-the-Poet%3Fnode-id%3D4%253A295%26viewport%3D195%252C393%252C0.0733996331691742%26scaling%3Dscale-down" allowfullscreen></iframe>
</div>
</body>
</html>

 

If I change the width and the height, it will be corrected for mobile, but then there's too much white space in that section for the desktop mode. Any suggestions? 

Link to comment
  • Replies 0
  • Views 1.2k
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.