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

Four card feature section with Html and Css

Edy• 530

@Evanny

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello, any comment about my code is welcome, thank you

Community feedback

P
Patrick• 14,325

@palgramming

Posted

you need to look at your layout in a browser 416px wide and you will see your whole layout switches to the desktop layout and is over running the sides of the browser window. The transition point between mobile and desktop is not usable for the user at that screen size

1
HYDROCODER• 555

@HYDROCODER

Posted

Hey there! Good job on this one. It is responsive and good animation for the attribution!... I would like to suggest the following if you don't mind:

  1. Try a mobile-first approach as it will be way more easier to do it for mobile versions first and then for desktop versions.
  2. You can increase the blur of the box-shadow for each card. This will make it more subtle.
  3. Use a min-height on the body instead of height:100vh. This will prevent the card from overlapping the attribution at around 900px or more.
1

Edy• 530

@Evanny

Posted

@HYDROCODER Thank you very much for the suggestions, they will surely help me to improve this solution and I will also apply these observations in future challenges again, thank you very much

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