Design comparison
Solution retrospective
I had slightly better understanding of responsive design. I will plan to make the designs, particularly the positioning and height work better in different sizes.
What challenges did you encounter, and how did you overcome them?I tried coding with fixed width and height but received feed back that unless specific it is not good practice to do it often.
What specific areas of your project would you like help with?Better understanding of how to use em, rem, vw, vh. How to have the divs be the sizes I want without having them be a fixed size.
Community feedback
- @SaruMakesPosted 5 months ago
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 withrem
throughout my projects. If I need to declare a specific font-size on an element/container, I can simply convert the desired font-size intorem
. 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 withrem
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 is16px
, so you can divide your values by 16 to get your sizes inrem
units instead. Be careful with declaring your individual font-sizes inpx
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-width
s 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 helpful1 - @JesyQueckPosted 5 months ago
Basically to my own understanding em, rem, viewport width, viewport height ( its sets the height of the div to the % you imputed), Viewport height can be used to style a div tag. But i will advice using the width and height properties in pixels
1
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