Skip to content
Submitted about 2 years ago

3-column-preview-card-component-main

Dilhan Boca•220
@dboca93
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

Hello,

For the design itself, I used a 3-column grid, transitioning into one-column @ 48em (768px). Please advise if this would be the sensible breakpoint for such a project.

Also, when you hover over the buttons -- there is a slight movement in the rest of the container -- what is the standard way of avoiding this?

Thanks so much for your feedback, Dilhan Boca

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted about 2 years ago

    Hi, Dilhan! 👋

    Congratulations on finishing this challenge! 🎉

    For the media query breakpoint, you want to add media queries when the content starts to break or needs adjustment. Also, I don't recommend using a specific device's screen size as the breakpoint. For example, 375px for mobile, 768px for tablet, and 1440px for desktop. You should not use those breakpoints as the only guides.

    The point is to only add media queries when there is enough room to have more columns or/and when the content starts looking bad.

    It's good that you are using em unit for the breakpoint. 👍

    I highly recommend writing the styling using the mobile-first approach. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.

    As @dusan-b mentioned, I recommend replacing all the buttons with anchor tags. If you think those buttons will navigate the users to another web page then user anchor tags.

    It is important to know that there's no need for aria-label when there's already visible text as the label.

    Some more suggestions:

    • All the headings should be on the same level. In this case, all of them should be h2.
    • I recommend reading the "How-to: Accessible heading structure - The A11Y Project" article to learn how to use headings correctly.
    • The cards should not fill the entire page on the one-column layout.
    • I recommend specifying the border-radius on the container of the cards. Then, set overflow: hidden to the card elements. This way, when the layout is changed to a three-colum layout, the border radius will automatically get applied to the correct card.

    For your information, it is possible to make the site responsive with no media queries. I recommend taking a look at my solution to know how to do that.

    I hope this helps! Happy coding!

    Marked as helpful
    1
    Dilhan Boca•220
    @dboca93Posted almost 2 years ago

    @vanzasetia Hello Vanza,

    Sorry for the late reply I've been distracted by some JS courses. Could you please take a quick look again at my code when you have the time -- I believe I've clarified most of the issues.

    Regards, Dilhan Boca

    0
    Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    @dboca93

    No worries!

    I took a look at your code and here are a few things that you can do to improve your code:

    I hope my feedback helps. 🙂

    Marked as helpful
    0
  • Dusan Brankov•860
    @dusan-bPosted about 2 years ago

    Hello Dilhan,

    to answer your question, you can simply add border: 1px solid transparent; to the CSS selector of the buttons. This way you reserve the space and thus avoid the layout from moving when hovering over the buttons.

    Another reasonable solution would be to replace border with outline on the :hover state. By doing this you don't need to specify an additional CSS rule, because outline does not take up space. The result is the same, so feel free to choose the technique you prefer the most.

    Besides, I would highly advise you to replace the <button> elements with <a> elements, since buttons intend to perform an action, such as submitting a contact form or toggling unvisible content. The "Learn More" buttons are acutally anchor links that have the purpose to navigate you to another page. They just look like buttons by design :).

    Hope this helps. Keep it up, and happy coding!

    Marked as helpful
    1
  • Algirdas•390
    @AlgirdasUPosted about 2 years ago

    Hey Dilhan. It moves a little because your ".flex-children > button" doesn't have border you wrote "border: none;" instead you should write "border: 1px solid var(--lg);"

    Marked as helpful
    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