Skip to content
Submitted over 3 years ago

HTML, CSS, Google Fonts

Heather Smith•220
@sorengrey
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

EDIT: Big thanks to @AgataLiberska for the suggestion of removing Bootstrap entirely. I had a bit of learning to do about responsive design without it, but now that I've gotten it done, I am happy. I may come back at some point and tweak the margins and padding to make mine match the example more exactly.

Hi! I enjoyed this little project, but struggled a bit with the media queries. I know Bootstrap can complicate those. If you have any suggestions on how to make mine better, please let me know. I know the 1440px one isn't perfect, so any help with that in particular would be appreciated.

Community feedback

  • Agata Liberska•3,995
    @AgataLiberskaPosted over 3 years ago

    Hi Heather! Congrats on your first challenge :)

    To be honest with you, I think using bootstrap for small projects like this is a bit of an overkill - you really don't need it and it seems like it's causing more issues than it fixes. I would suggest getting rid of it and just using flexbox here, it will help you learn more about how it works. The custom styling for cards you've done looks really nice, I also had a look at your HTML - not sure if you need br tags, you can just use more padding/margin on your other elements. I think the titles could also be heading tags, to include a bit more semantic HTML.

    Other than that I think you've done a really nice job on your first challenge, if you've got any questions let me know and I'll do my best to help :)

    Marked as helpful
    2
    Heather Smith•220
    @sorengreyPosted over 3 years ago

    @AgataLiberska Thank you so much for taking the time to check this out! You're right, I did have to wrestle with Bootstrap a good bit here and it probably wasn't necessary. Taking it out and starting fresh sounds smart. I'll give that a try!

    0

Please log in to post a comment

Log in with GitHub

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