3 column preview card

Hello @Goat3ggs!

Your project looks great!

The content is cut off at the top on mobile version because you set place-content: center; to it. This is not a problem for the destktop version, since the card should be in the middle of the page.

You can fix that by adding place-content: center; only for the destktop version. You can use media queries for that. Do this:

• First, remove place-content: center; from the body.

• Then add place-content: center; to the body's @media: 600px.

By doing that, it'll only work for the desktop version, and your mobile version won't be cut off anymore.

I have one more suggestion for you:

• Consider increasing your @media breakpoint. Between 600px and 800px the card gets squeezed. Maybe increase it to 900px or so.

I hope it helps!

Other than that, you did a great job!

Hello!

The issue you're experiencing with the content being cut off at the top on mobile screens may be related to the way you've set the height of the html and body elements. While setting height: 100%; is a common practice and even comes by default in some CSS resets, on smaller screens like mobile devices, the content can often exceed 100% of the screen. Also, the place-content: center; is centering the element perfectly within its screen (That's why you will always see the SUVs section in the center.), but to achieve this, the component gets pushed upwards. This is why you may see content cut off at the top.

To address this, consider using min-height: 100vh; instead. This allows the body element to grow in height, adapting to the content. You can also explore using dynamic viewport units for a responsive solution.

I hope you find it useful! 😄

Happy coding!