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 Component

@AnoshaSohail

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


Hello community,

I'm looking to implement responsive design, and I'm seeking guidance on the best practices to achieve this as I find it hard to make website fully responsive. I want the website to adapt seamlessly to various devices and screen sizes. If you have any insights or tips on responsive web design, I'd be grateful for your expertise.

Thank you for your time and assistance!

Community feedback

@kaggelos

Posted

Implementing responsive design in css can be one hell of a task, but some good practices that might help are a mobile-first design workflow (meaning that you first design the website for a mobile layout then you alter it to a desktop layout using media queries) and trying to avoid using absolute units in things like margins, paddings or position, and using relative ones instead. Looking at your code, I would also suggest that you use more rounded numbers (instead of 0.55586em, for example) Other than that, you've done a marvelous job!

Marked as helpful

0

@AnoshaSohail

Posted

@kaggelos Thanks for your tips . I'll keep these in mind

1

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