I don’t see any CSS at all on that page. I guess you are in the process of updating it?
It’s not. Unless you have a phone the size of a large tv.
You should not (as mentioned multiple times now) base your media queries on imaginary devices. The breakpoints are those dictated by the needs of the design in hand. Some designs may need to go to one column only when their content no longer fits. What device fits this size is irrelevant. Some phones have bigger screen than some old tablets. Some tablets have bigger screens than laptops. Some laptops have bigger screens that desktops. There is no common device size unless you base your design on one device at one point in time.
You haven’t removed it. You now have an additional closing tag and an additional opening tag.
Your basic page structure should be:
<!DOCTYPE html>
<html lang="en">
<head>
Stuff for head goes here
</head>
<body>
Stuff for body goes here
</body>
</html>
You also need to ensure that you have matching opening and closing tags for each element. At the moment, you have a lot more closing paragraph tags than opening ones. You cannot be surprised that a page does not display as expected if the structure is incorrect. If a browser encounters code it doesn’t understand, it will attempt to interpret and display it, but the result is likely to be a broken page.
The validator is also trying to make sense of your code. It displays errors where it finds them, but some errors are at such a fundamental level it does not know how to proceed, which is where you see the “Fatal error” message.
Yes you have made a number of schoolboy errors and the main ones are that you are setting a fixed height for elements that hold fluid content like text. You can’t set a 20vh height on the header and footer or this happens.
The content is too tall for the element at certain screen widths and overflows. When you set a fixed height then that’s all you get and you get no more. Therefore in your design you have fixed the height to 20vh + 60vh + 20vh which equals the viewport height and that means that your content can never go below the viewport without overflowing and indeed cannot extend out of each individual row without overlapping.
What you should have done was set a min-height of 100vh for the wrapper and then used a 1fr setting for the middle row which would force it to take up all the slack and stop all 3 rows expanding equally. That now means the header and footer will contain their content height whatever that may be and the middle row will always stretch to fill the rest of the space when content is less than viewport height. If content is greater than viewport height the whole thing will just grow as required.
You also applied justify and align rules in the wrong place as they only apply to an element of display:grid and not its children (unless they are display:grid or you use the justify:self rules instead).
I’m not sure why you created about 14 columns when you only want two so the grid areas can be simplified (unless indeed you are going to have 14 separate columns in some sections).
I’ve reduced the code to what I think you were intending but at the least will show you where you went wrong even if you have to change it again.
Note that your 30rem padding on the wrapper is unworkable and instead i have used a max-width on the wrapper and used margin:auto to center it.
Refer to the comments in the code for further advice. Also note that you had many broken ‘p’ tags in that demo despite use asking you to run the code through the validator before posting
I think you can ignore the validator warning. It’s saying that you have specified that the language of the web page in English, but - of course - lorem ipsum is not English!
It’s all a learning curve and the best way to learn is to jump in and start coding but expect to fail often.
These days CSS is so vast that it’s a lifelong pursuit to know it all and it’s constantly changing anyway. Just Flex and Grid could take a year or more to master and indeed some people never do master them but are still able to use it if they stick to what they know.
Of course the basic fundamentals should be learned first but once past that hurdle then anything is game We all learn from our mistakes.
