Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Css Gird, Flexbox, Mozilla Dev Tool, Adobe XD, Stackoverflow, CSSTrick

@davupls

Desktop design screenshot for the Base Apparel coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Was using CSS Grid on <section class="tags-container"> to control the layout a valid approach?

What topics do you notice right away I could improve on?

Is my Code readable to you?

Recommendations?

Community feedback

Account Deleted

Using CSS Grid to solve this challenge is a very good idea and the code is readable but I don't understand the purpose of using the article element as a generic container. Is there a reason behind that?

There's a fixed width that's causing horizontal overflow; to fix it just change from

grid-template-columns: 1fr 560px;

to

grid-template-columns: 2fr 1.5fr;

2

@davupls

Posted

I used the 560px cause it's 40 percent of the 1440 if I'm remembering correctly.

1

Account Deleted

@davupls oh ok, but it's a relative size container and it's not recommended to use px on that type of container because you lose size control over it and have to start using media-queries validating all possibilities, so in this case, would be better to use fr.

1

@davupls

Posted

Wow okay let me go check this. Thank you.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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