![](https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_900/Screenshots/qiai23ojpoftat5xuhdc.jpg)
Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I'm most proud of the fact that my photos didn't spill out of the parent card, I struggled for a long time with that.
What challenges did you encounter, and how did you overcome them?I had trouble getting the section tag to center horizontally and vertically on the page. I overcame them by:
- Positioning the section relative to its nearest positioned ancestor or initial containing block (viewport).
- Setting the top position of the section to 50% of the viewport height.
- Setting the left position of the section to 50% of the viewport width.
- Centering the section horizontally and vertically by shifting it half its width and height in opposite directions.
-- Am I using the tags correctly? -- Is my CSS correct to not let the image overflow the parent tag and center the section tag? Is there anything I can improve? -- I linked the google font Open San, but it doesn't recognize this font? Why? What should I do?
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