@correlucas
Posted
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 like margin: 20px; to avoid the screen borders to "touch" the card. Fixing that you can consider use the property max-width instead of width 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 helpful
@ComanderPotato
Posted
@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?
@correlucas
Posted
@ComanderPotato Hello Tom, you're welcome. I don't get your question about max-width, can you explain me, sorry.
@ComanderPotato
Posted
@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
@correlucas
Posted
@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 and remyes its true, for a better performance in multiple screens sizes use a relative unit like remor em over px.
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 helpful
@ComanderPotato
Posted
@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.
