Design comparison
Solution retrospective
styles.css Line 113: Here I had to use width 400% to my image to make it work, can you tell me why? How can I fix it?
Community feedback
- @neilk17Posted about 2 years ago
Hey Francisco, Congrats on completing this challenge and good job on making it responsive!
I don't think you need the
line 113 styles.css
is required. Here's some other suggestions:- Accessibility: These are easy fixes such as using html landmarks (<header>, <main>, <footer>) instead of <div> tags to contain most of the content.
- Flexbox: You can effectively center your content using css flexbox, by putting the code in a container and using
display: flex; align-items: center; justify-content: center;
Hope this helps, and let me know if you have any other questions.
Marked as helpful1 - @correlucasPosted about 2 years ago
👾Hello Francisco, Congratulations on completing this challenge!
Here’s some tips to improve your component design:
Your component is okay but its missing the vertical alignment. The best way to do it is by using
flexbox
. First step is to addmin-height: 100vh
to make the body height size becomes 100% of the screen height, this way you make sure that whatever the situation the child element (the container) align the body and then use the flex properties for alignment withdisplay: flex
/align-items: center;
/justify-content: center;
body { min-height: 100vh; margin: 0; background-color: hsl(30, 38%, 92%); display: flex; flex-direction: column; align-items: center; justify-content: center; }
I saw that for some properties you’ve used
rem
and for otherspx
. In this case it is better to use only one kind of unit to have a better organization for your code.relative units
asrem
orem
that have a better fit if you want your site more accessible between different screen sizes and devices.REM
andEM
does not just apply to font size, but to all sizes as well. ✌️ I hope this helps you and happy coding!0 - @hyrongennikePosted about 2 years ago
Hi @Fran505,
Congrats on completing challenge
As @neilk17 mentioned you can use flexbox to position the card in the middle of the page. you can add the following rule to your CSS file.
body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; }
you need the
min-height
otherwise it won't be centered and theflex-direction: column
is there to just make the card and attribute stack on top of each other.Hope this is helpful.
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