@geomydas
Posted
First of all, don't set a fixed width on most elements. You should only use fixed width for very very small items such as a profile picture whose dimensions is 35px x 35px but do not set a fixed width to a container or element that is guaranteed to get small at a certain screen size.
What you would do is set both width and a max-width. The width should be in responsive units such as vw, % or rem but the most reccomended is %. Rem kinda is unresponsive and vw makes things super small. After setting a width in relative units, set a fixed unit for your max-width (px) is the most used one.
Here is what the code would look like, you could use any number but this is just an example {width: 95%; max-width: 350px}.
Second of all, don't use divs and spans for everything out there. Accesibility and semantic matters. Use this for learning semantic html https://www.w3schools.com/html/html5_semantic_elements.asp or https://www.freecodecamp.org/news/semantic-html5-elements/.
You should use the most appropriate element if possible and do not use divs unless absolutely necessary. Use main, header, footer, section as an alternative for divs. You only use div when the info is not necessary.
Third, why the hell is the body element in each css selector. The CSS code is very messy.
Marked as helpful
