MichGlad

Hi @bangank36

unfortunately I did not find a solution to it yet.

Hi @bangank36 :)

I want to have some kind of animated portal frame around the figma iframe. I don't want to make the animation in figma, as it should already be visible while figma is loading. Also, it schuld cover up the hard boarder of the figma iframe.

I used this code for the animation: https://codepen.io/propjockey/pen/vYxraBz?editors=1100

Thank you for your help :)

Hey there,

I am working on including a Figma prototype with a portal animation around it. I managed to make the portal animation overlap with the Figma iframe.

The problem is that I cannot click anything in the interactive prototype, as the image is in the foreground.

Do you have any idea how I could make it clickable? Is there a way the click on the image gets ignored and I can directly click on the iframe / interact with the prototype? I don't want the portal animation to be in the background though, as the hard border of the iframe should be covered. Or do you even have a better idea to create such a portal frame?

Thank you so much for your help!

PS: The portal animation is based on this if you are courious: https://codepen.io/propjockey/pen/vYxraBz?editors=1100

I have a markdown text on my page that looks a bit like that:

Hi! 👋
I'm Josh.

### Hi! <strong class="shakeHand">👋</strong> <br> I'm Josh.

I would love to rotate the hand a bit when you hover over it. As if it waves.
I only found out how to do it with images, but how could I do it with a single letter?

How could I do that via CSS?

Thank you in advance! :)

Hey guys :)

I made my portfolio on a 4k display with a scaling factor of 175% in the windows 10 display settings* - no browser zoom. On that display, it looks like I want it to look (look at image 1). When I look at it on a 1920px display with a zoom of 100% it looks quite similar, though a little bit bigger.
But when I saw it on a 1920px laptop screen that was on 125% scaling during a portfolio review, the proportions of the text and images were way too large while the white space was too small (look at image 2 - imagine this being full screen 🙈).

   *If it is unclear what I mean by the scaling factor, I mean this: https://youtu.be/t9xIbkD6XjQ?t=30

What do I do in such a case?
I cannot decide the screen size of the HR person I send the portfolio to, so it should look good on every screen size, no matter if 4k or 1920px, and no matter the windows scaling factor (at least it is quite normal to have a scaling of 125% on a 1920 laptop screen and 150-175% on a 4k display).

Is it possible & smart to set a zoom level of the browser depending on the screen size and windows zoom level?
Or can I add additional breakpoints?

Thank you so much for your support in advance! :D

Image 1 (on 4k full screen):

Image 2 (looks terrible on a laptop in full screen):

On 8/24/2020 at 11:45 AM, oddthing said:

Hi,

Yes, but for some reason this only changes the Fade In....there is no fade out when the cursor leaves the image 😕

The fade in AND out should work if you separate the two states kind of like this:

/*original state*/
.image-block{
  transition: .5s;
}

/*hover state*/
.image-block:hover {
  opacity: 0.6;
}

Maybe this helps you as well: 

And if you don't want that white figma footer at the bottom of your iframe you can add %26hide-ui=1 to the end of your src url.
Otherwise just add 48px to your height so the footer does not overlap.

Thank you @tuanphan :)

I found a solution to my problem

HTML code block:

<div class="iframeContentCenter">
  <iframe style="border: 1px solid rgba(0, 0, 0, 0);" width="414" height="882" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FqfvtLv9FQgLOek1VqmI9OM%2FPhoneScreenTestSqurespace%3Fnode-id%3D1%253A32%26scaling%3Dmin-zoom%26page-id%3D0%253A1" allowfullscreen></iframe>
</div>

Custom CSS:

/*iframe position*/
.iframeContentCenter{
  width: 414px;
  margin: auto;
  border-style: none;
  height: 100%;
  display: block;
}

Hi :)

How can I resize the embedded Figma block to have the proportions of a mobile phone?

I would like to add a Figma prototype for a mobile application to my Squarespace website. I tried adding it, but it has the wrong proportions - it is too short and too broad.

This is how it looks:

I would like the Figma prototype to look more like this and to be responsive for mobile view:

I used this code to create it:

<html>
  <head>
    <style>
      #content {
        width: 800px;
        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="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FqfvtLv9FQgLOek1VqmI9OM%2FPhoneScreenTestSqurespace%3Fnode-id%3D1%253A32%26scaling%3Dmin-zoom%26page-id%3D0%253A1" allowfullscreen></iframe>
    </div>
  </body>
</html>

I found the code here: https://www.figma.com/developers/embed

Here the link to the prototype again: https://www.figma.com/proto/qfvtLv9FQgLOek1VqmI9OM/PhoneScreenTestSqurespace?node-id=1%3A32&scaling=min-zoom&page-id=0%3A1

I would be very grateful if you could help me :)
Thank you in advance!