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

3-column Preview Card Component (HTML + CSS)

@arunkumar0398

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I would love to hear your opinions and feedback on this submission for this challenge from the community.

Community feedback

T
Grace 29,310

@grace-snow

Posted

Hello

Font sizes on mobile don’t look right on this. Headings in particular are small.

And the layout breaks completely for me on mobile landscape, I think because of the media query being at the wrong width. Media query should just be a max width in this case, no min width, as you’ve coded it desktop first and should start as soon as there isn’t enough room for all three columns.

I also recommend losing all the huge padding’s on body. You shouldn’t need them. Keep it small as the only purpose is to stop content hitting screen edges

I hope this helps 😊

1
P
Patrick 14,285

@palgramming

Posted

change your media query to this and you will be much better off @media (max-width: 850px)

0

@arunkumar0398

Posted

@palgramming I will change the media query to those you said and check the solution to the design.

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