@Gareth-Moore
Posted
Well done Matey! Good practice I bet.
If I were to nitpick I'd offer the following suggestions:
-
You've used incredibly small font sizes (10px). Consider that you should use 16px as you're smallest size for normal content. (a copyright or T&C could be smaller for example).
-
You've used hard widths for many things like your heading and paragraph elements. You can instead set a max-width and allow them to grow into their space but be limited to a certain width. To make sure you have space around the element put padding on the parent element. E.g.
<div style="padding: 1rem">
<h1 style="width: 100%">Hello</h1>
<p style="width:100%">It's a me, Mario!</p>
</div>
Note: block level elements have width: 100% by default (like h1 and p).
In the above, the h1 and p elements take up all the space except for 1rem on the left and 1rem on the right. Making them fit in nice and snug.
-
The breakpoint for the larger screen-size is too early and so you have a container that is breaking out of the viewport/screen. Consider putting the breakpoint later, at about 800px. Then for the mobile view, give the container a max-width: 380px (or about there) and margin-inline: auto (same as margin-left: auto & margin-right: auto) to center it. There will be empty space around the container at medium screen sizes but it's way better than having the container outside the viewable area.
-
This is a bit more complicated but use padding over margin for spacing elements. The reason is that margins don't have background colours, you can only make changes to the content box + padding, and margins collapse on each other and you might be scratching your head as to why a margin is not showing up even though it's set, that is because if there is a top margin, it will collapse with margin above it. (2 touching vertical margins will collapse on each other). Prioritize using flex/grid gap for spacing, then padding, then positioning (top, left, right, bottom, inset etc) and lastly (if you have to) margins. It will save you a good amount of heartache.
So, you're main container has a width: 70%. You can get a much better result by setting a max-width: 380px (or similar value) and setting it's margin to 1rem/16px or setting body { padding: 1rem }. In this particular case I'd set the margin on the .container because you may not want padding through the entire body, say if you had a banner going from left to right, it would look stupid with padding on either side.
Anyway, hope that wasn't too much. Best of luck!
@devWina
Posted
@Gareth-Moore the fact you took out the time to really explain, is 🤯. Thank you so much