What are you most proud of, and what would you do differently next time?
I am most proud of the responsiveness of the QR Code Component. Initially, when I had it, the text or image would overflow outside of the card and really got me thinking as to how I could solve it. When I was able to solve, that feeling was great because I had made a component that looked good across different screen sizes without needing to use a media query.
What challenges did you encounter, and how did you overcome them?
My challenges came off with figuring out which semantic HTML elements to use and also how to import web fonts.
When it came to the HTML elements, I consulted the Mozilla Web Docs - HTML to see what attributes were widely supported and their use cases to help me decide which elements to use in my source code.
For web fonts, I decided to follow the documentation in the Google Fonts API support and used the link tag to import the font-family then create a CSS class to get the two font variants.
What specific areas of your project would you like help with?
My implementation for getting the card component to be in the middle of the screen was to do the following:
.container {
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
}
Initially, I was planning to position the card component using Flex but was having issues regarding the positioning. The way I had it was to make the body tag have a display of flex then do flex-direction: column, justify-content: center, and align-items: center but noticed that the card was still positioned at the top. I was wondering the different ways you could position the card component in the middle using Flex or Grid and also the benefits of using those methods versus the implementation I had done above.
hi there! 👋
You can center your content with Flexbox, but you have to specify height for the body tag. Without that flexbox won't center the content. So your code should look like this:
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
Use min-height, otherwise users won't be able to scroll down if your content does't fit into one screen on smaller screen sizes.
Hope this helped 🙏
Good luck and happy coding!
Marked as helpful
@bmuia
Posted
add the height property to body
body { height: 100vh; ...... }
Marked as helpful
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
