Media query difficulty in my product landing page

HTML-CSS
1

Hi, I’m done with the 3rd project but i’m having problems making my page perfect for smaller viewports:

  1. The background becomes excessive when viewed on my mobile
  2. The videos and the grid layout (below the video) do not respond to my general media query placed on the ‘body element’.
  3. My header gets jumbled up.

I have a feeling i have to put specific media queries for each section but is that really so?

Is there a perfect media query to capture all the elements on my ‘body element’

Can i get good media query examples for the video and the grid?

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36.

Challenge: Build a Product Landing Page

Link to the challenge:

2

I’d suggest that fix your html code first, you can validate it e.g. here

3

hi @cnwak

this would be help you with

Analyze HTML

_20200602_002258
_20200602_0022581080×1387 205 KB

do this before you validate it on w3c validator