Design comparison
Solution retrospective
Overall I enjoyed this challenge.
I had some struggles using grid for the layout. Initially, I had set 2 grid columns, but couldn't convert these to rows using a media query, so I changed to grid-template-areas.
I also had to fiddle around with the buttons, as upon resizing the browser they wouldn't always be level with each other, so I ended up setting the container positions to relative, and setting the buttons postions to absolute. To avoid the buttons and paragraphs from overlapping, I had to set a largin margin-bottom for the p elements.
Are there better ways to deal with these issues? Does my solution go against best-practice?
Any feedback is much appreciated!
Community feedback
- @Szabolcs-ZegPosted almost 2 years ago
Dear Sleeepyskies! First of all, congratulations on the solution. You can set the grid with the grid-template-column: 1fr 1fr 1fr; property on desktop. (or repeat(3,1fr) ) In mobile view, only the grid is enough. I think the margin is a good solution for placing the buttons here. I would use the min-height property in a real environment (where the length of the texts may differ slightly). (Here approx. 22em can be good.) One more thing: it might be worth setting the value of the media query to more than 600px. Around 650px it looks pretty weird. But all in all, congratulations again! Your solution is absolutely right!
Marked as helpful1
Please log in to post a comment
Log in with GitHub
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