Skip to content
Submitted almost 3 years ago

Responsive 3 column card component using flex box and 0 media queries.

Arthur Roberts•410
@arfarobs
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 found this challenge pretty easy. I used Flexbox for the design I thought it was the most logical choice. I wanted to add an extra challenge by trying not to use any media queries and still have a responsive component. I had three issues: 1 - When changing the size of the screen the border-radius disappears. I assume that the only way I can solve this is with media queries. 2 - This issue Is not a major problem, however when the screen width is less than 260px the paragraph text doesn't wrap. 3 - When I ran this on lighthouse it gave me the following error: "Each ARIA role supports a specific subset of aria-* attributes. Mismatching these invalidates the aria-* attributes. Learn more." -- It says that the element in question is a div, but I don't have any divs in my HTML. This confused me.

If anyone has the solutions to these issues it would be greatly appreciated.

This is the first time that I have made a thorough readme. Any advice would be great.

Also, any feedback on better practices when coding would be great.

Thanks.

Each ARIA role supports a specific subset of aria-* attributes. Mismatching these invalidates the aria-* attributes. Learn more.

Community feedback

  • Anthony Rosman•510
    @D3press3ddPosted almost 3 years ago

    I hope you understood my explanation because my english is really bad, but i try 😁😁, happy coding.

    Marked as helpful
    0
    Arthur Roberts•410
    @arfarobsPosted almost 3 years ago

    @D3press3dd

    Don't worry your English is perfectly understandle. Thanks for the help.

    0
  • Anthony Rosman•510
    @D3press3ddPosted almost 3 years ago

    Take a look to this article Flex, if you use flex shrink to 0 it will overflow the parent, in this case the parent is main, so because yo have overflow:hidden the part overflowing its not showing

    Marked as helpful
    0
  • Anthony Rosman•510
    @D3press3ddPosted almost 3 years ago

    however when the screen width is less than 260px the paragraph text doesn't wrap this problem is because of the flex shrink flex shrink

    Marked as helpful
    0
    Arthur Roberts•410
    @arfarobsPosted almost 3 years ago

    @D3press3dd

    Of course, I can't believe I missed that. Thanks for pointing it out.

    0
  • Arthur Roberts•410
    @arfarobsPosted almost 3 years ago

    Accessibility WARNING Page should contain a level-one heading

    Context:

    <html lang="en"> Learn more

    Also, if anyone could explain why I have this message in my report that would be great.

    0
    Anthony Rosman•510
    @D3press3ddPosted almost 3 years ago

    @arfarobs this error its not like hard, remember that you have to atleast have 1 h1 in the document but sometimes you dont need it.

    the problema with aria-roles is the way that blind people navigate the page, idk how to explain it properly but check this video accesibility video i think is in the minute 20:00 , but the idea is to add some aria to the section to describe what it is, for people that cant see.

    Marked as helpful
    0
    Arthur Roberts•410
    @arfarobsPosted almost 3 years ago

    @D3press3dd

    Yeah, the h1 rule I totally understand I just read it wrong haha.

    That videos great thanks.

    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