Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product Preview Card (HTML | CSS)

@RedDotz20

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


based on my current styles/css how can I improve my code in terms of responsiveness?

Community feedback

@williamboehringer

Posted

Hello Carlos, congratulations finishing this challenge!

I quickly took a look on your code using the browser dev tools and I think the major problem with your responsiveness is the fixed value for the body. If you remove the height property from your body, you'll notice that your whole page will still be shown, even in small screens, wich isn't the case by now. Instead of giving a height value to your body, do it to the container that wraps your content, use min-height with value between 90 to 95svh. It will ocupy the most of the page in any sizes, and if you extremely reduce the page height, it will adapt and you wont lose any content, will just have to scroll the page to see, like it supposed to be.

Overall, you did really well in your attempt. Hope I've helped!

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord