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 Car Category Selector Component

@guilherme-dm

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


Feedback around the mobile/desktop breaking point resolution would be interesting. Feels like i had to change it quite soon so the desktop layout wouldn't get messy.

Community feedback

argel omnes 1,800

@argelomnes

Posted

Hey Guilherme,

The starting breakpoint you chose for desktop is fine. Texts is still easy to digest as they're not that long. The cards are narrow on this one. An improvement you might consider is to reduce padding so the texts aren't cramped much. You can also improve your CSS by moving common properties from each classes into a single tag or class. For example:

span {
    padding: 48px;
    min-height: 400px;
}

.sedans {
    background-color: var(--bright-orange);
}

.suvs {/* bg color*/ }
.luxury {/* bg color*/}

Marked as helpful

1

@guilherme-dm

Posted

@argelomnes Thanks a lot for the feedback Argel!

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