Design comparison
Community feedback
- @Islandstone89Posted 11 months ago
HTML:
-
You need a
<main>
, this is important for accessibility. This can also be the card, as we want the structure to be as simple as possible here. -
You don't need any of the divs, so I would remove those.
-
The image must have alt text! This is essential for screen readers to understand the image. The alt text should be descriptive, and in this example, it also needs to say where it leads (frontendmentor.io).
-
It's common practice to use classes instead of IDs.
CSS:
-
It's good practice to include a CSS Reset at the top.
-
text-align: center
should be on thebody
. Remove it from the<h1>
- the heading will inherit the value from the body, so your code is redundant. -
On the
body
, removeoverflow: hidden
andwidth: 100%
- it is a block element, hence it is 100% wide by default. -
The card's parent should have a
min-height
instead of aheight
. -
Remove the fixed width and height. This includes all of the
%
widths, too. You rarely want to set fixed dimensions, as this easily creates issues with responsiveness. -
Add a
max-width
of around 20rem on the card, to prevent it from getting too wide on larger screens. -
Remove the
footer
styles, unless you actually include the<footer>
in your HTML. -
Remove the
margin
on the card, it is already centered using Flexbox. -
Add
display: block
andmax-width: 100%
on the image - the max-width prevents it from overflowing its container.
Marked as helpful1@TheGroobiPosted 11 months ago@Islandstone89 Thanks you very much! I applied the changes you suggested and uploaded a second solution. The code is way easier to read and understand now. Not sure if i should have so many elements inside the body selector but i guess it works. I just couldn't figure out the exact width and how to make it as close to the design as possible. I really appreciate the help :)
1@Islandstone89Posted 11 months ago@TheGroobi happy to help - well done!
Quick tip: you can remove
flex-direction: row
- it is the default value when you declaredisplay: flex
.1 -
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