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 using semantic HTML and CSS custom properties

Sope 20

@Mosopeoluwa

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

Community feedback

P
cjdemille 480

@cjdemille

Posted

The link to your sedan icon is broken (which looks like it's also causing an alignment issue in your webpage).

I'd also explore using a flex-box or bootstrap framework to display this. It would make it easier to center the row of cards horizontally. It would also help with the responsive layout.

Because you set those cards to inline-block you have an awkward layout between the mobile and desktop views. On a tablet or medium size window the sedan and suv sections each take up half a row, but the luxury card has the same dimensions but is centered on its own row. You could use bootstrap or flexbox with a media query to get a better responsive layout.

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