@asbhogal
Posted
Hi Aslam,
When you use sizing, you should use rem units. There are converters which use the base of 16px to convert these for you. In general with containers, you should use a max-width on the parent container with an explicit value (ie. unit) and a width: 100% with @media queries for padding with smaller devices. For eg., if your max-width is 350px, by the time you get down to that value in the viewport, the content will touch the sides, so you can add a padding property for the body element in a @media query for this width so you still have some spacing. The max-width means that with viewports above that width, it will always stay at that fixed value, and with viewports below it, the content will take up the full (ie. 100%) width of the parent container.
You should also avoid setting explicit heights to the parent container and width and height properties to the child elements inside it because this can cause overflow issues. It's best to let them occupy the space they need to naturally.
With this, hopefully you can refactor your code with these changes. If you need any further help, let me know.
Marked as helpful
@AslamtoIbrahim
Posted
Hello dear, First, I thank you for your valuable and important feedback. You told me it's better for me to avoid setting the height and let the children elements take their appropriate heights. However, when I did that, all the elements started to stack in one place, and the flex doesn't affect them anymore. Is there any way I can make all the elements take their positions and appear as if they have a specific height?
