@Islandstone89
Posted
It looks OK for me, too. But I don't recommend setting a fixed width, that usually does more harm than good. So I would at least change width
to max-width
- this will allow it to shrink if needed.
A few other things I noticed...
HTML:
-
Headings must always be in order, so you should not jump from
<h1>
to<h3>
. Hence, I would change all instances of<h3>
into<h2>
. -
Footer text must be wrapped in a
<p>
.
CSS:
-
You don't need to give the
body
a width of100vw
, as that is its default width anyway. -
Similarly, the default root font size is
16px
, so no need to declare it. Remember, though,font-size
must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead. -
It is common to do mobile styles first, as its layout is usually less complex. This means setting min-width media queries, and they should be in rem.
-
You are giving
main
abox-sizing: border-box
on smaller screens.box-sizing: border-box
is usually set on all elements, like this:
*,
*::before,
*::after {
box-sizing: border-box;
}
This is usually done at the top of the stylesheet, as part of a CSS Reset. I would recommend including it every time - I use this CSS Reset by Andy Bell.
Marked as helpful
@tenze21
Posted
Is it ok to use the header tags like it is done here for styling purpose because i think the developer used the h3 tags to make the text a bit bold but the contents don't actually seems to be header. Just something that struck me while going through the code. @Islandstone89
@Islandstone89
Posted
@tenze21 No, you cannot skip headings. You can style it in CSS if needed, but the HTML document needs to have headings in order.