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

Responsive landing page using css

@Divine-Blessing

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


The responsiveness was the most challenging part as I had an error from my syntax which took me time to discover.

Community feedback

@thaisavieira

Posted

Hi, @divine-bblessing! Be welcome to Frontend Mentor Challenge community and congratulations on submitting your first challenge. Your desktop's solution is pretty close to the design but I have some appointments for the mobile version. First of all, when we get to resolutions, such as 437 x 490 pixels, the design gets messed up and the button comes out of the card. However, if we keep decreasing the screen size, the mobile version also appears similar to the requested design but with the positioning located at the bottom of the page. Tips for solving the problems encountered:

  • The first point is that you say you found problems working with responsiveness and I have two suggestions that helped me on that same point. The first one is about the page: https://css-tricks.com/a-complete-guide-to-css-media-queries/
  • And the second point is a browser extension that helps analyze responsiveness on different devices: https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb I hope I have helped you in some way. Keep studying, you're doing great!

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