Skip to content
Submitted over 2 years ago

CSS FLEX BOX

Miguel Silva•510
@migsilva89
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

I have learned how to use flex, and how to use @media with mobile first workflow.

Tips for improve will be much appreciated.

Thank you all! Miguel Silva

Community feedback

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

    Hi There! 👋

    Congratulations on finishing this challenge! 👏

    I have some feedback on this solution:

    • Accessibility
      • All the page content should live inside landmark elements (header, main, and footer). By using them correctly, users of assistive technology navigate the website easily. In this case, wrap all of it with main tag.
    <body>
  <main>
    page content goes here...
  </main>
</body>
    • The learn more buttons should be links instead of button elements. If this is a real website, the Learn More buttons would navigate the users to a different webpage.
    • Next time, if you are going to use button element, always specify the type of the button. In this case, set the type of them as type="button". It's going to prevent the button from behaving unexpectedly.
    • Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (by using Tab key) easily.
    • Headings must be in a logical order. Heading tags can be used by users of assistive technology to navigate the website. If headings are not in a logical order, those users might get confused. In this case, replace all the h3 with h2 and if you want to remove the Accessibility Issues, you can have a sr-only h1.
    <main>
  <h1 class="sr-only">3 column card component</h1>
  ...the card content goes below the h1
</main>
    • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only.
    • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.
    • Styling
      • To make the card perfectly in the middle of the page, you can make the body element as a flexbox container.
    /**
 * 1. Make the card vertically center and
 *    allow the body element to grow if needed
 */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh; /* 1 */
}
    • Add the border to the initial state of the Learn More buttons to prevent jumping layout. Also, just make the background: transparent; to create the :hover effect.

    That's it! Hope you find this useful! 😁

    Marked as helpful
    1
    Miguel Silva•510
    @migsilva89Posted over 2 years ago

    @vanzasetia Thank you for all the tips, I have made some changes and updated the version.

    Still cant figure it out how to make the h1 the same as the requested design.

    Any tips?

    regards, Miguel Silva

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

    @migsilva89 It looks like you haven't imported the font families. I don't see any link in the HTML or @import in the CSS file.

    Marked as helpful
    0
    Miguel Silva•510
    @migsilva89Posted over 2 years ago

    @vanzasetia Ops, noob mistake lol.

    Thanks for the help!! :)

    0
  • Hexer•3,660
    @EmmanuelHexerPosted over 2 years ago

    Hi Miguel, congratulations on finishing this challenge.

    I have some tips on how you can improve your code.

    • Wrap your card in a main element to fix accessibility issues by placing it just after the body element and draging your content inside.

    I hope this helps.

    Marked as helpful
    0
    Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    @Phalcin Adding a height: 100vh to .box-container doesn't make the cards in the center of the page. Instead, it makes the cards have a full height which is an unwanted thing to happen.

    Marked as helpful
    1
    Miguel Silva•510
    @migsilva89Posted over 2 years ago

    @Phalcin Thank you for the tip :) I have fixed only adding a padding to the top.

    Regards, Miguel

    0
    Miguel Silva•510
    @migsilva89Posted over 2 years ago

    @vanzasetia Thank you for the tip :) I have fixed only adding a padding to the top.

    Regards, Miguel

    0
    Hexer•3,660
    @EmmanuelHexerPosted over 2 years ago

    @vanzasetia Yeah i see, Thanks for clarifying.

    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