recipe-page12

it's best you use rem for your front size compared to pixel. check out this article https://fedmentor.dev/posts/font-size-px/#top

Hi, You did a great job at this challenge, the design looks pretty similar. To attain the length of a webpage, set height to 100vh in body. As for your question about the screen size, I'm not sure since some mobile screens are above 375px.

Congratulations on your project it turned out really well 🥳

Your project very similar to the design provided!

And explaining your doubt, a media query checks the specified condition and applies the styles defined within it only if the condition is true.

Exemplos:

1. Adjust style for screens smaller than 599px:

@media (max-width: 599px) {
  body {
    background-color: lightblue;
  }
}

In this example, the body background will change to lightblue on screens with a width of 600px or less.

2. Adjust style for screens larger than 600px:

@media (min-width: 600px) {
  body {
    background-color: lightblue;
  }
}

In this example, the body background will change to lightgreen on screens with a width of 600px or more.

3. Adjust the style for screens between 600px and 1440px wide:

@media (min-width: 600px) and (max-width: 1440px) {
  body {
    background-color: lightblue;
  }
}

In this example, the body background will change to lightblue on screens with width between 600px and 1440px.

Applying to your reality: 🙏

In the case of this project, you need to make a mobile screen where its base is 375px, but you need this design to behave the same way on all mobile devices. If I'm not mistaken, the largest mobile screen is currently 430px, so your media query would look like this:

@media (max-width: 430px) {
  body {
    background-color: lightblue;
  }
}

Then all screens with 430px or less will display the styles you specify. Above 430px, the conditions you highlighted in the CSS database outside of the media query will be valid.

If you have any further questions or need help, I'll be happy to answer them!

I hope this helps!