@briangesteban
@delacruzralph
Submitted
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!
@briangesteban
Posted
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 helpful
