Media query difficulty in my product landing page

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?

https://codepen.io/cnwaks/pen/BaoXBgj

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:

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

hi @cnwak

this would be help you with

Analyze HTML


do this before you validate it on w3c validator