Skip to content
Submitted over 3 years ago

Responsive 3 column preview card only CSS

sass/scss
Peally•200
@Peallyz
A solution to the 3-column preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Nothing really hard (for me) except with the responsive where i have waste a lot of time. My render is not perfect under 1000 px.

I still enjoyed this challenge.

Code

Please log in to post a comment

Log in

Community feedback

  • Travolgi 🍕•31,280
    @denielden

    Hey Peally, congratulations on completing the challenge! You did a great job 😉

    Let me give you some little tips for optimizing your code:

    • remove all margin from main tag
    • use flexbox to the body to center the card. Read here -> best flex guide
    • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
    • use h2 for the titles of cards
    • use button for the learn more buttons and not a styled p
    • instead of using px use relative units of measurement like rem -> read here

    Hope this help! Happy coding 😁

    Marked as helpful
  • Vanza Setia•27,715
    @vanzasetia

    Hi, Peally! 👋

    Great work on this challenge! Your solution looks pretty good! 😀

    I recommend adding max-width to main element to prevent the cards from becoming too large on one column layout.

    Other recommendations from me.

    • For the "Learn More" buttons, I recommend using interactive elements such as link or button element. Remember, always use an interactive element if the element has interactivity.
    • In this case, all the car icons are decorative images so I recommend leaving the alt empty. This way, screen reader users won't have to listen to the unrelated or unnecessary content.

    That's it! I hope this information is useful! 😁

    Marked as helpful
  • Kamasah-Dickson•5,570
    @Kamasah-Dickson

    Your solution looks great bit on smaller devices you have to

    • reduce the margin left and right for your each container to have enough width, they look squashed together in small devices.

    • Remove any positioning property on the footer and just add text align center.

    Besides hope that was helpful. 👍 Good job, keep coding friend👍👍

    Marked as helpful
  • Peally•200
    @Peallyz

    Thanks you all for your tips I used most of all to correct my code.

    Have a nice day !

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