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 mobileFirst responsive design(optimised CSS)

@sakthivel155

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Jawad 170

@J-Jawad

Posted

You did a great job on this. One thing I'd like to mention is that you should set the min width of the media queries to be slightly bigger than big mobile screens (426px) this way it will show the mobile version on mobile devices (425px and less) and the desktop versions on tablets and desktop devices (even ones with slightly smaller screens than 1440px). Whereas what you did is show the mobile version on any screen that is smaller than 1440px (including smaller desktops and tablets).

Marked as helpful

0

@sakthivel155

Posted

Hi @J-Jawad !

Thank you for your feedback!

I just follow the style-guide they given

  • 375 px for mobile screen
  • 1440 px for desktop screen no problem i will change my code with responsive for all screen (mobile, tablet, laptop, desktop ).
  • also I figure out the large screen design look bit bigger.
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