Design comparison
Solution retrospective
I didn't face any difficulties during this project. I normally use em values is css but here I've used static px values so that might be a problem sometime in much lower width devices. Yes, I would like to know best possible solution for this challenge.
Community feedback
- @Islandstone89Posted 12 months ago
HTML:
-
You need a
<main>
, this is important for accessibility. Change<article
to a<main>
. -
The alt text also needs to say where it leads (frontendmentor.io).
-
I would change the structure a little. Change
<section class="qr-background">
to<div class="qr-box">
. That's the only wrapping element you need. You don't need one div for the card background, and another div for the card content.
CSS:
-
Performance-wise, it's better to link fonts in the
<head>
of the HTML then using@import
. -
It's good practice to include a CSS Reset at the top. You especially need to add
box-sizing: border-box
to*
-
Font-size must never be in px. Use rem instead..
-
Remove
height: 100%
on the image. Changewidth: 100%
intomax-width: 100%
, and adddisplay: block
. This is included in the CSS Reset. -
Remove
display: block
on the card - it already a block element by default
display: flex; justify-content: center; align-items: center; min-height: 100vh font-family: var(--outfit); text-align: center;
should all be moved to the
body
.-
max-width
on the card should be in rem. Around20rem
will work fine. -
Remove
width
on the image, changemax-width
to100%
, and adddisplay: block
. -
Remove
max-width
on.title
and.description
. Instead, usepadding-inline
.
0 -
- @rickyxyzPosted 12 months ago
I'm a beginner myself, so you might want to take this with a grain of salt 🧂.
Maybe you could try making responsive font size and styling the elements using
rem
based on the responsive font size. Also, just as a suggestion, you might want to look at the most common screen size being used right now, so you can determine how small or how large of a screen you should accomodate.Cheers 🍻.
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