I'm struggling with my product page

[jlace4327]

I can’t seem to figure out how to make my Product Page responsive. Specifically I can’t figure out how to scale everything properly to size. I know all I have right now is the background color changed for media, but even that doesn’t seem to be working. What am I doing wrong?
I also feel like my code isn’t properly structured. Does anyone have any advice or suggestions?

FCC Product Page

[staranbeer]

Hey! i just noticed your code and here are a few things that i would suggest you work on.

First and foremost, you should arrange your CSS code in a way that makes it easier for you as well as others to make sense of or debug. A popular way of doing that is having all the element selectors at the start of the file, then code related to individual elements in the sequence they appear and media queries at the end of the file. for example.

//tag selectors and base styles

  body {color: red;}
  h1 {padding: 1rem;}

//component styles
    //first component
    .header { color: green;}
    
    //then any children of the component
    .logo{max-width: 3rem;}
    .nav {margin: 1rem;}
   
    //second component
    ...

//media queries
@media  screen and (max-width: 300px){
  .header{color: red;}
}

This approach will at least let you start thinking about structuring your code in a logical way.

The next thing would be to add a background color to the nav element as it looks okay at the top of the webpage but if you scroll it down a bit you’ll notice that due to most of the elements having a transparent background initially, it becomes almost impossible to read.

And for the main section on the webpage, it looks like you have three div’s the first one is the paragraph and the form, the third div is the one you’re using to embed the video and the second div is being used to add spacing between them.

Instead of adding spacing manually, you should use flexbox to do it as it would be much easier to implement and add media queries to because you can use to change the flex-direction to column when it hits a certain breakpoint. which should also take care of the side scrolling on your webpage.

if you’re not familiar with flexbox, it is basically a CSS feature which allows us to lay out elements in one dimension with little to no hassle and we can set custom spacing to every element at the same time or individually.

if you wanna learn flexbox. you can go through the freecodecamp’s tutorial or use mdn.

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

Hope this helped!

[jlace4327]

Thank you so much for taking the time to give me suggestions. I am working on fixing all of the things you mentioned now.

[staranbeer]

Don’t mention it and let me know if you face any more problems!