@markup-mitchell
Posted
Hi Katrien,
From what I can see it is centered on mobile, it's just that there's no additional space available to appear at the top and bottom because the <body> is set to height: 100vh.
If I understand your problem, maybe the simplest solution is to add, say 5rem of padding-top and padding-bottom to the body tag?
In general terms, your structure is unconventional and potentially problematic. I would expect to body, main, and section tags to be nested in the following order:
<body>
<main>
<section>
</section>
</main>
</body>
Marked as helpful
@markup-mitchell Thank you for having a look. I'm slow in understanding semantic html, but will focus on that more the coming days, to make sure I don't make any more unconventional structures. In this case I deleted all section-tags and added main in the correct place. I added the padding aswell, which does make it look a bit better om mobile.
@markup-mitchell
Posted
@graficdoctor nice work!
Semantic HTML can be confusing. The nice thing about it is that it's not all-or-nothing. Every little piece you learn makes things slightly better and it all adds up.
Slow and steady wins the race!
