Design comparison
Community feedback
- @lisztomania23Posted about 1 year ago
Hello there! 👋
I've taken a look at your code, and I have some feedback to share:
-
It seems you wanted to try and use
absolute: position
andtransform: translate(-50%, -50%)
to center the card within the.container
. However, you could have achieved the same result more simply by usingjustify-content: center
andalign-items: center
in the.container
. -
You've applied a media query for small screens to adjust the width of
.items
, the width of theimg
, andpadding/margin
for other elements. Instead of doing this, you could have given a non-relative width value to.items
(width: 330px
) and set theheight: auto
. But if you wanted to try and use a media query, you would need to make a few other tweaks. -
It's a good practice to use a single
<h1>
element for the main heading of your page before using<h2>
. -
You've used a different font URL for "Outfit" font (which was recommended). Here's the corrected URL for the "Outfit" font:
https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap
-
I also made a few other tweaks to the fonts in
<h1>
and<p>
, as well as the padding. Here is the code below:
* { padding: 0; margin: 0; } body { background-color: hsl(212, 45%, 89%); } .container { width: 100%; height: 100vh; position: relative; display: flex; flex-direction: column; } .items { position: absolute; top: 50%; left: 50%; width: 330px; /* changed value */ /* width:25%; */ height: auto; /* changed value to auto */ transform: translate(-50%, -50%); text-align: center; align-items: center; background-color: hsl(0, 0%, 100%); border-radius: 13px; padding-bottom: 20px; } .img { padding: 5px; margin-top: 20px; } img { max-width: 280px; /* changed value */ height: auto; border-radius: 10px; } /* changed h2 to h1; change in HTML also */ h1 { padding: 6px 30px; /* changed value */ margin: 2px; color: hsl(218, 44%, 22%); /* font-weight: 700; */ /* import recommended font and activate this property */ font-size: 22px; /* added */ } p { padding: 6px 30px; /* changed value */ margin: 5px; color: hsl(220, 15%, 55%); font-size: 16px; /* changed value */ /* font-weight: 400; */ /* import recommended font and activate this property */ } /* removed media query */
Overall, your code is functional, but these improvements can help make it cleaner, more maintainable, and aligned with best practices. Keep up the good work! 👍
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