Skip to content
Submitted over 2 years ago

3 Column Preview Card Component - No media queries, CSS Grid, Flexbox

Adam Wozniak•230
@adamwozhere
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

For this project I looked into a way of not using media queries at all. I managed to create a container class that would handle going from a 3-column layout directly to a 3-row layout without any wrapping as you would get with flexbox. It's not necessary as a media query would be fine for this simple example, but I think it's something that would be very helpful in a larger project, and helped me understand CSS grid better. (see repository page for more information.)

Community feedback

  • Danilo Blas•6,300
    @Sdann26Posted over 2 years ago

    Adam, I just reviewed your project and everything is fine.

    To be able to eliminate that error that comes out in the report we will make a trick of accessibility, for it you will put inside the main a h1 with the class sr-only and with the text that you want to put him of title.

    To this class add the following attributes:

    .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0,0);
  border: 0;
}

    They will make the title not visible but present in your code.

    With that would be all you have a very good project congratulations.

    Marked as helpful
    0
    Adam Wozniak•230
    @adamwozherePosted over 2 years ago

    @Sdann26 Thanks Danilo, I looked into accessibility and visually hiding elements after seeing your comment, and have added it to my code!

    1

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