Design comparison
Solution retrospective
- How could I Improve the responsiveness of the page ?
- How can I reduce the lines of code to make it more compact ?
- What is the right approach to build this page ?
Community feedback
- @RaiRaiCidadePosted over 1 year ago
Hello👾
Solving the responsiveness issue
To improve the responsiveness of the page you could use Media Queries -- Here is the documentation of this property -- with this property you can adapt your page to diferent resolutions.
Also you can change from absolute length units (like px, for example) to relative length units, like rem or em
You can check more about it here
Making the code more compact👩💻
For that issue you can use variables on CSS, that way you don't have to repeat the same stuff everytime, you can use then for colors, for example.
:root { --principal-color: #FFFFFF; } body { background-color: var(--principal-color); }
With that you can reduce a lot the repeated lines of code.
Other advice is that you use the parent and child tags dynamics in your favor to add properties that will need to be repeated in the same section, that way you don't need to call the same property enumerous times.
Marked as helpful0
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