Design comparison
Community feedback
- @brunomoletaPosted over 1 year ago
Hi Aydan,
I suggest you watch out for the use of pixels in your CSS as, according to Heydon Pickering & Andy Bell from Every Layout:
"Screens are made of pixels and are not regular, immutable, or constant. A 400px box viewed by a user browsing zoomed-in is not 400px in CSS pixels. It may not have been 400px in device pixels even before they activated Zoom.
Designing using the px unit not only encourages us to adopt the wrong mindset: there are manifest limitations as well. For one, when you set your fonts using px, browsers assume you want to fix the fonts at that size. Accordingly, the font size chosen by the user in their browser settings is disregarded.
[...]
The units em, rem, ch, and ex present no such problem because they are all units relative to the user’s default font size, as set in their operating system or browser. Browsers translate values using these units into pixels but in a way sensitive to context and configuration. Relative units are arbitrators."
Also, advice is to adjust the media query widths from 420 to 680 px and especially from 770px to 900px at this size, as a 2023 tablet has around 800 to 850px wide. The red card at that specific width is getting hard to read. You could adjust removing the
position: absolute
and setting amargin-inline-end
with a%
, I believe.Great hustle, and keep it going
Best regards from Brazil 🇧🇷 :)
Marked as helpful1@AydanKaraPosted over 1 year ago@brunomoleta
Thank you Bruno for this comprehensive feedback. A person learns something new every day. Thank you for the recommendations. I will keep them in mind in my next projects.
Best regards from Germany :)
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord