Responsive Recipe Page using pure HTML, CSS, and Flexbox
Design comparison
Solution retrospective
I'm proud that I could use Flexbox to create the bullet points in the unordered lists to give them a behaviour similar to the design. I also used my creativity to solve the layout issues that I encountered.
What challenges did you encounter, and how did you overcome them?At first, I thought the unordered lists and their bullet points were just normal lists. However, the design required that the bullet points were vertically centred, regardless of the size of the page and if the links' texts were distributed in different lines after resizing. I thought I could do that using the marker
pseudo element, but it didn't work. I then used flexbox and could resolve the issue.
I would like to find materials on BEM
Community feedback
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