Design comparison
Solution retrospective
I mainly focused on the design of it so the HTML isn't that semantic with only divs. I decided with a wrapper that is display flex and aligned and justified to center on the screen, padding to make some more white space. Let me know how I did!
Community feedback
- @correlucasPosted over 2 years ago
Hello Tom Golding, congratulations for your first challenge solution!
I saw your live site and the design is all perfect, you've matched the design files. There's only one detail to fix. Your card is slightly bigger than the reference, try a value for
width
around 340 / 360px, 400px is too big. You can add a small margin around the container likemargin: 20px;
to avoid the screen borders to "touch" the card. Fixing that you can consider use the propertymax-width
instead ofwidth
to keep your element flexible and allow it to contract in narrow screens..container { margin: 20px; max-width: 350px; background-color: hsl(0, 0%, 100%); padding: 20px; border-radius: 20px; }
Check the report panel to fix minor issues about the accessibility and the html semantic.
All the rest seems really good, congratulations!
Marked as helpful1@ComanderPotatoPosted over 2 years ago@correlucas Thank you! Yeah when I got the live server up and everything I noticed the paragraph lines for the slightly greyer text weren't the same as the design picture, and either put it on padding should be higher or width. I haven't used max-width before is that an in-between instead of using a fixed pixel length?
1@correlucasPosted over 2 years ago@ComanderPotato Hello Tom, you're welcome. I don't get your question about max-width, can you explain me, sorry.
0@ComanderPotatoPosted over 2 years ago@correlucas Sorry. Does using max-width make it more responsive because I've heard that using a fixed value such as px isn't good for responsive design
1@correlucasPosted over 2 years ago@ComanderPotato Ahh! If you use max-width this means that you container has maximum value for width not the minimun, so if your screen becomes smaller the container can contract its width, the same happen with min-width but in the opposite sense. For example: max-width 500px can be smaller than 500px but not bigger, width 500px will be ever 500px not bigger or smaller. About the
px
andrem
yes its true, for a better performance in multiple screens sizes use a relative unit likerem
orem
overpx
.If you use VS Code there's a plugin that change automatic from pixels to rem. So you can code your solution in pixel and in the end only use the plugin to convert from px to rem. The plugin name is "px to rem".
See the W3 Schools example for relative units: Reference here: https://www.w3schools.com/cssref/css_units.asp
em Relative to the font-size of the element (2em means 2 times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to the width of the "0" (zero)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport
vh Relative to 1% of the height of the viewport**
vmin Relative to 1% of viewport's* smaller dimension
vmax Relative to 1% of viewport's* larger dimension
% Relative to the parent element
I hope I explained you better this, I have some limitations with the language since I'm brazilian ahhahah
Marked as helpful1@ComanderPotatoPosted over 2 years ago@correlucas thank you for the explanation! I will look into using min/max for more responsive layouts, as well as the other unit measurements I haven't heard of. I've heard of em and rem but never new specifically what the difference was.
0
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