Responsive Flexbox 3 column layout

Community feedback

• 

  Nilanshu V Rajmane•125

  @nilanshu96

  Posted about 4 years ago

  Your solution looks pretty good. For button the better solution would be to use the following for hover

  .learn-more-button:hover {
      background-color: transparent;
      color: var(--very-light-gray);
  }
  

  For this to work you need to add a 1px solid white border on the button's class by default so that you won't have to add it separately for hover. Since the border and button's background would have the same color it won't be visible in button's normal state.

  13
• 

  tediko•6,700

  @tediko

  Posted about 4 years ago

  Hello, Tyson! 👋

  Good effort on this challenge! Everything works good and responds well. In addition to both nilanshu and brasspetals feedback I'd suggest you to take a look at:

  • Change the alt attributes for the .leading-vector-images icon images, as they don't add any extra context for screen reader users. Since your images are decorative your alt text should be provided empty (alt="") so that they can be ignored by assistive technologies.
  • Change width: 300px for your .column-card on mobile to 100%. This way your container will be growing with screen size. Now your solution is only looking good on mobile/desktop.

  Good luck with that, have fun coding! 💪

  01
• 

  Anna Leigh•5,135

  @brasspetals

  Posted about 4 years ago

  Hi, Tyson! Congrats on submtting another solution! 🎉 It looks good and responds well.

  I'm seconding Nilanshu's solution to the button styling. I do have a small suggestion concerning those buttons, however. They're actually "button-styled links" rather than buttons, as they don't have any button functionality. Switching button out for a tags instead would be more semantically correct. This is a very common mistake, which I've been guilty of myself in the past! 😅

  01