Design comparison
Solution retrospective
I'm proud of using Flexbox for this project. Next time i'll use SCSS.
What challenges did you encounter, and how did you overcome them?The most difficult for me was to place the card on the middle of the page. But with Flexbox I was able to solve the problem. Also it's not exactly like the design but i don't known why yet.
What specific areas of your project would you like help with?I would like help with the height and width of the component. Because it's very difficult to me to know them.
Community feedback
- @Islandstone89Posted 8 months ago
HTML:
-
Remove the
<article>
, you only need the.card
div inside the<main>
. -
In the alt text, change
qr-code
toqr code
. -
Delete
.attribution
if you're not going to include it. If you do, it should be a<footer>
, and you need to use<p>
for the text inside.
CSS:
-
Including a CSS Reset at the top is good practice.
-
Add around
1rem
ofpadding
on thebody
, so the card doesn't touch the edges on small screens. -
On the
body
, changeheight
tomin-height
- this way, the content will not get cut off if it grows beneath the viewport. -
Remove all widths and heights in
px
. -
Move
border
andalign-items
from.content
to.card
. Remove the remaining properties on.content
. -
Remove the properties on
.content-card
, as the<article>
should be removed from the HTML. -
Add a
max-width
of around20rem
on the card, to prevent it from getting too wide on larger screens. -
font-size
must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead. -
Since all of the text should be centered, you only need to set
text-align: center
on the body, and remove it elsewhere. The children will inherit the value. -
Paragraphs have a default value of
font-weight: 400
, so there is no need to declare it. -
Remove
margin
andpadding
on.card-img
. On the image itself, adddisplay: block
andmax-width: 100%
- the max-width prevents it from overflowing its container. -
To create the space between the image and the edge of the card, set
padding
on all 4 sides of the card:padding: 1rem;
.
Marked as helpful0 -
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