Design comparison
Solution retrospective
keep the simple project simple. Using container to wrap the element you want to style.
What challenges did you encounter, and how did you overcome them?how to position child element away from the parent element. Setting appropriate size for parent and child element. Using margin to distance border of parent element and child element.
What specific areas of your project would you like help with?how do I choose sizing unit for different types of context and when building website responsively?
Community feedback
- @Howslifem8Posted 3 months ago
Hello Anthony, you've done a great job with this project. Your website looks identical to the design. The only 'thing' was the size of the card container as it looks a little smaller than the original but besides that everything looks great. As for your question, the sizing units differ based on the context of your website. There 2 categories of sizing units, Absolute units and Relative units. The main behavioral difference between them is distinctly in their names. Absolute units are sizing units used to create fixed dimensions. They do not change size or location when the screen size changes (EX: px, cm, mm, etc). Relative units on the other hand scale with the environment (EX: em, rem, %, etc). Relative sizing units change depending on how the website is being viewed (on a smaller/larger screen etc). For example a relative unit known as 'rem' is used for scaling text relative to the root element, meaning if the root font size is 16px then 1rem = 16px. Hope this helped a little. Have a nice one !!
0 - @Stephanie-DennehyPosted 3 months ago
Hi Anthony,
I'm not quite sure what you're asking about sizing. Could you provide a little more detail here? You mention responsive designs, so I am guessing you are asking how to make the design smaller on a mobile device. This would be done with media queries to adjust for the larger or smaller breakpoint.
I was unable to link to your code. I'm getting an error when I try to view the code. But if you can update that, I'd be happy to take a look and offer more feedback!
0@Codingtry123Posted 3 months ago@Stephanie-Dennehy
Hi Stephanie,
Thank you for your help. Media query is a great choice to build website responsively. The question I want to ask is what sizing unit should developer use to set the font size in order to make website more responsive? I have changed the visibility of repository to public. Wish you have a great day.
0@Stephanie-DennehyPosted 3 months ago@Codingtry123
Thanks for the clarification. You can use EM or REM units rather than pixels to help make the resign more responsive. There is a guy on youtube named Kevin Powell who does a great job of explaining the difference and when to use each unit. Definitely check him out!
There is also something called clamp( ) that you can use to help control the sizes. You can check that out here if you want. https://developer.mozilla.org/en-US/docs/Web/CSS/clamp
0
Please log in to post a comment
Log in with GitHub
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