Tech book club landing page with anchor positioning
Solution retrospective
I chose this challenge to stretch my CSS layout skills and get additional practice after I completed the Building responsive layouts learning path. I use vanilla HTML and CSS without frameworks or preprocessors.
For anything more complex than this landing page, I would want to look into better organizing my code by using multiple smaller stylesheets or better tooling.
What challenges did you encounter, and how did you overcome them?One of my biggest challenges was the dark patterned background that covers the last section of the main content area and the page footer. I used a ::before pseudo-element on the last section of the main content and anchor positioning with anchors on that section and on the page footer.
Using width: 100vw to extend the background over the full viewport width caused an issue in desktop browsers, know as the classic scrollbar problem. The space that the vertical scrollbar takes up makes 100vw larger than the viewport width and causes the page to overflow horizontally. I solved it by setting scrollbar-gutter: stable on the <html> element.
I'd like to get feedback on my use of CSS pseudo-elements and positioning to create decorative backgrounds.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Sabine’s solution.
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