@SaruMakes
Posted
Hi there! Congratulations on finishing the challenge! 🎉👏
I'm not the most experienced developer out there by far, but these are things I've learned so far, which might help you out as well:
Using em/rem 🔤
The em unit inherits its size from the font size of the parent element, which makes it trickier to work with. I'm sure there are cases where it could be useful, but I find it far easier to stick with rem throughout my projects. If I need to declare a specific font-size on an element/container, I can simply convert the desired font-size into rem. That way, if a user sets their browser to use a larger standard font size, I'm sure that all of the elements/attributes that are sized with rem units will scale proportionally to each other.
I try to only use pixel values for very specific use-cases, where it won't interfere with the rest of the design, if everything else is scaled up. The basic font-size for browsers is 16px, so you can divide your values by 16 to get your sizes in rem units instead. Be careful with declaring your individual font-sizes in px for the same reason, as that will prevent users from scaling the font-size to fit their needs.
Controlling Width & Height 📏
You are sorta already controlling the sizes of your elements of the containers. In this instance, if you feel like the main element is too wide, you can simply set max-width:<value>;, which will prevent the element/container from growing larger than that. As long as you haven't set any fixed widths on nested elements within the container/element, then they should simply scale with the container.
That way the container won't grow larger than that size, but it will still shrink with the viewport, if it gets smaller than that size.
Inversely, you can set max-widths on elements nested inside the container, to constrain how large they can be, which in turn will determine the size of the container itself, as it'll grow or shrink to fit its contents.
I hope this helps! Happy coding! 👍👍
Marked as helpful
