Responsive Flexbox 3 column layout

Community feedback

• 

  Nilanshu V Rajmane•125

  @nilanshu96Posted over 3 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.

  1

  ---

  

  Tyson W•305

  @Tyson-WellingsPosted over 3 years ago

  @nilanshu96 Ohhh that makes alot of sense. Thank you! So for the regular states there isn't a more elegant solution for the text color?

  0

  

  Nilanshu V Rajmane•125

  @nilanshu96Posted over 3 years ago

  @Tyson-Wellings I was doing the exact same research during this challenge. The solutions I found involved using some very modern css which isn't supported everywhere hence I left it but this is the solution I found.

  .learn-more-buttons {
      mix-blend-mode: screen;
      color: black;
  }
  

  To understand how this works you can checkout this site: link

  0

  

  Tyson W•305

  @Tyson-WellingsPosted over 3 years ago

  @nilanshu96 That's a very creative solution. Thank you! I also appreciate you sending the link too :)

  0
• 

  P

  tediko•6,680

  @tedikoPosted over 3 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! 💪

  0

  ---

  

  Tyson W•305

  @Tyson-WellingsPosted over 3 years ago

  @tediko Thank you for taking the time to provide such thorough feedback. The alt text point is very new to me and makes alot of sense! Changing the column-card width to a percentage unit also does make sense in making my solution more responsive.

  0
• 

  Anna Leigh•5,135

  @brasspetalsPosted over 3 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! 😅

  0

  ---

  

  Tyson W•305

  @Tyson-WellingsPosted over 3 years ago

  @brasspetals Good catch! I'll be sure to use <button> next time instead of a tags.

  0