Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

MichGlad

Member
  • Posts

    6
  • Joined

  • Last visited

  1. 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! :)
  2. 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):
  3. 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:
  4. 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.
  5. 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; }
  6. 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!
×
×
  • Create New...