Design comparison
Solution retrospective
To anyone seeing this, please give your feedback on anything i can improve upon
Community feedback
- @avinash4364Posted over 1 year ago
Here are my suggestions :
- As 'p' and 'h3' is block level element it will occupy the full width of its parent container, so you don't need to give the paragraph or the heading an explicit width(unless the design requires it) just give it a padding and it will adjust itself with various screen sizes.
p{ /* width:80%; */ }
-
Even the height of the container (.centered) should not be fixed, it should adjust with the content. So, if the content is big enough the height should increase and if the content is not big enough the height should decrease. So, height on centered class is not neccessary.
-
Use max-width instead of width for the width of your container as, because it allows the container to be flexible and adapt to different screen sizes. Even if you are using width use rem units for the width instead of %units. This will make your design consistent across various devices, as percentage units boxes are dependent on their parent container which can cause the content to overflow.
This will make your design more consistent and responsive across various devices.
0@shin0s0Posted over 1 year ago@avinash4364 Thanks for the feedback. I have updated the code please check again if anything else need correction.
0 - @Aimal-125Posted over 1 year ago
The card component is not looking good on my samsung j3. You can set the width of .container class to 80% in the @media rule. It is apperaing very slim on the screen.
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