Design comparison
Solution retrospective
As you can see I can't complete imitate the original challenge due to my limited knowledge in CSS field. I tried to set padding and change height of middle container to be bigger than both left and right containers, it didn't work though. Instead of expanding vertically like the original design, it keep compressing the inner content instead. Learning more about grid should help fix this problem but I just can't wrap around it for the time being. Any feedback would be highly appreciated.
Community feedback
- @cmb347827Posted over 1 year ago
Hi, I'm not that great either at CSS, it's harder than it seems when you first get started! So don't worry, it's normal.
Try adding a media query for the desktop width , and within that adding the following code:
.middle{ margin-top: -15px; margin-bottom: -15px; border-radius: 15px; }
You may need to adjust the negative margin value to make it work, but this worked for me.Marked as helpful0
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