Design comparison
Solution retrospective
I often find myself feeling weird about hardcoding sizes such as width and height of elements since screen sizes can affect the viewing experience. What are some good practices when it comes to setting sizes of elements? I know there exists different measurements aside from pixels, but I don't have a full grasp on them conceptually. Any resources would be helpful!
Community feedback
- @briangestebanPosted almost 2 years ago
Hi @delacruzralph!
What I could suggest is to code mobile first your CSS and use relative units such as em, rem, %, etc. After coding everything on mobile display then you could now adjust the size for the bigger displays using media query and max-width. This will also lessen redundant codes and a smoother load for mobile users.
Using max-width means you are setting your element to how wide it could only go. Let's say you wanted it to be until 800px wide only for desktop, then set max-width to 50rem.
Also on height, I just let it be. I don't usually set a specific height for my element unless I need it to be specific.
You could also checkout (w3schools.com) for reference.
P.S. For accessibility warnings, you should use semantic elements or give your elements role, name and value. You could check it out here to understand more on accessibility. (https://www.w3schools.com/accessibility/index.php). I'm also currently learning it. 😁
Hope these helps you!
Marked as helpful1 - @kebin20Posted almost 2 years ago
I mostly use a combination of percentages, em and rems, and vw and vh (probably precentages more than these) and never use pixels for sizing, as it ruins the sizing when taking responsive design into mind.
Have a watch on Kevin Powell's video on ems and rems: https://www.youtube.com/watch?v=_-aDOAMmDHI
Marked as helpful1
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