Design comparison
Community feedback
- @xaintobasPosted 5 months ago
Hi @Umar094,
Nice work on your design! I noticed a couple of opportunities to enhance it:
Spacing Below the Container: There is a lot of space below your
container
div. Instead of using:.container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; background-color: hsl(0, 0%, 100%); box-shadow: 0 0 20px -10px; border-radius: 10px; width: 45%; height: 60%; }
Consider using:
.container { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); background-color: hsl(0, 0%, 100%); box-shadow: 0 0 20px -10px; border-radius: 10px; max-width: 650px; }
The
auto
ingrid-template-rows: repeat(2, auto);
allows rows to adjust based on content, andmax-width: 650px;
provides a more responsive design. The width and height you specified are not necessary.Formatting "Why Us" Content: For better readability, you can break your
"Why Us"
content into separate lines using the<br>
tag.Instead of:
<div class="box box-3"> <h2>Why Us</h2> <p> Tutorials by industry experts Peer & expert code review Coding exercises Access to our GitHub repos Community forum Flashcard decks New videos every week </p> </div>
Consider using
<div class="box box-3"> <h2>Why Us</h2> <p> Tutorials by industry experts<br> Peer & expert code review<br> Coding exercises<br> Access to our GitHub repos<br> Community forum<br> Flashcard decks<br> New videos every week </p> </div>
These adjustments will improve your design. Let me know if you have any questions or need further assistance!
Hope to be helpful.
Marked as helpful1@Umar094Posted 5 months agoWouldn't it be better to use rem, insted of px? If user in browser change the font size, then box need to be expanding, but if i fix the box width with px, then it will not expend with the content size@xaintobas
0 - @xaintobasPosted 5 months ago
@Umar094 here’s how you can incorporate
rem
units into your CSS:.container { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, auto); background-color: hsl(0, 0%, 100%); box-shadow: 0 0 20px -10px; border-radius: .6rem; max-width: 45rem; }
You can as well adjust the values.
Feel free to let me know if you have any questions or need further assistance!
Hope to be helpful.
Marked as helpful0 - @xaintobasPosted 5 months ago
@Umar094 yeah, using
rem
units is better for ensuring scalability, as it allows the design to adapt to the user's browser settings and font size preferences.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