[Solved] Help with media queries for the product land page project

#1

I’m hoping to realign the elements of my header and pricing section vertically when a certain screen width is reached in order to make the project mobile-friendly. I’ve been playing around with media queries but have had no luck achieving my desired outcome so far.

Any help is greatly appreciated!

Link to project: https://codepen.io/jjeva/pen/VNBYby

#2

If you have not already, you should check out the Media Query challenge in the FCC curriculum. You are not properly creating them. You do not put them in the middle of an existing selector definition. Instead, you put them as a separate definition.

Instead of what you have:

.className {
  prop1: value1;
  prop2: value2;
   @media (max-width: 500px) {
    prop1: someOtherValue;
    prop3: value3;
  }
}

it would be:

.className {
  prop1: value1;
  prop2: value2;
}

@media (max-width: 500px) {
  .className {
    prop1: someOtherValue;
    prop3: value3;
  }
}

Also, you can put all of the selectors you want to change under the same media query as long as the condition is the same. In your case, all of your media queries have the same max-width: 500px condition, so you would only need one if you wanted.

1 Like
#3