Component being rendered with a different height than figma design

Guys am working on this challenge: https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H here's my code link: https://github.com/umwebdev/qr-card-component here's the live preview: https://fem-qr-card-component.vercel.app/ the ISSUE I am facing is as following: height of the card element in the figma design is 499px, while the height of my live preview is around 503px, i have not set the height explicitly and it's the default "height: auto;" My first guess was maybe the line height and the font sizes are different but that's not the case as well, I am using same properties for elements, such as paddings, margins, line height, font sizes, letter spacing etc yet somehow my live version is being rendered with the different height. What could be the possible reason here ?
Frontend Mentor
Frontend Mentor | QR code component coding challenge
A perfect first challenge if you're new to HTML and CSS. The card layout doesn't shift, so it's ideal if you haven't learned about building responsive layouts yet.
GitHub
GitHub - umwebdev/qr-card-component
Contribute to umwebdev/qr-card-component development by creating an account on GitHub.
13 Replies
ἔρως
ἔρως3w ago
wrong font, wrong font height, wrong margin, wrong padding, floating number imprecisions, your display dpi, os font settings, os font rendering, different browser, different os/distro, different version of the font, viewport size, browser zoom, gpu drivers... it can me a billion things 503px of height is close enough to 499px, so, you did awesome on asking
usama
usamaOP3w ago
yeah, it could be number of different things, i mostly did my research through chatgpt and it also mentioned something like difference with how figma and browsers render fonts differently but still there should be something causing it. I'm not sweating on it but it would be great to know the reason behind it and maybe find out a possible fix to this
ἔρως
ἔρως3w ago
did you confirm the size of everything?
usama
usamaOP3w ago
yeah it's absolutely same as mentioned in figma
ἔρως
ἔρως3w ago
even all margins? also, figma counts borders as part of the size of the element
usama
usamaOP3w ago
there wasn't any borders involved and also i set box-sizing to border-box
ἔρως
ἔρως3w ago
any margings or padding with the wrong sizes?
usama
usamaOP3w ago
ok so just out of curosity I did another one, with almost the same dynamics, the size in figma was 522px in height while the html css version in the browser comes out as the computed height of 528px, so it's not the margins and paddings and whatsoever its something with how figma and browser render, we need an OG here none, i have checked everything like 100 times. tried rems first then used pixels for everything, nothing changes except when i explicitly define the height and then content overflows
ἔρως
ἔρως3w ago
then it is just rendering differences
usama
usamaOP3w ago
this wasn't a rendering issue, it was simply display: block; issue.
ἔρως
ἔρως3w ago
🤔 interesting in which element?
usama
usamaOP3w ago
img element
ἔρως
ἔρως3w ago
🤔 well, im surprised and not surprised images are weird
Want results from more Discord servers?
Add your server