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
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
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
did you confirm the size of everything?
yeah it's absolutely same as mentioned in figma
even all margins?
also, figma counts borders as part of the size of the element
there wasn't any borders involved and also i set box-sizing to border-box
any margings or padding with the wrong sizes?
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
then it is just rendering differences
this wasn't a rendering issue, it was simply display: block; issue.
🤔
interesting
in which element?
img element
🤔
well, im surprised and not surprised
images are weird