Mobile-first 3 Column preview card

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  In html I recommend you

  • change h1s for h2. Optional but in all liklihood this component would exist on a page with a heading so h2 would be better hierarchy
  • remove alt values and leave the attributes empty instead, as these are meaningless images that can be ignored by screenreaders and bots. Then look up how to write alt text well for future challenges where you'll need to.
  • change buttons for anchor tags. These would trigger navigation, not perform an action like toggling content.

  Happy coding

  Marked as helpful

  1
• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  All you need is a border on the buttons to fix that layout shift. Make it the same color as the btn background or make it transparent. Either way, that tells the dom how high it needs to be, it's unrelated to flexbox

  Marked as helpful

  1

  ---

  

  Letlotlo•60

  @LT-WebDevPosted over 3 years ago

  @grace-snow Thanks for this input - I too am busy with this challenge and had the same problem. Your input helped fix my problem ;).

  Thanks again. LT

  0
• 

  Faris P•2,810

  @FarisPalayiPosted over 3 years ago

  Nice job on this one👍

  You can fix that by giving a fixed height to cards.

  • Use cursor: pointer to buttons to better indicate interactivity.
  • Also, try to use a smaller media query breakpoint, because even though I'm using my laptop to see the solution, I'm getting the mobile version of the site.

  Have fun coding 👍

  Marked as helpful

  1

  ---

  

  Marcos•95

  @marcosfsousaPosted over 3 years ago

  @FarisPalayi Thanks for the input, Faris. I have cursor: pointer on the active states of the buttons, but I agree that before they are clicked they should hint to the user they are indeed interactable.

  I added some more breakpoints as you hinted.

  Thank you for taking the time to reply to the project.

  1
• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  you should change your .card-container margin to margin: 70px auto;

  Marked as helpful

  0

  ---

  

  Marcos•95

  @marcosfsousaPosted over 3 years ago

  @palgramming Thanks for the input Patrick. Updated my solution and inserted your helpful hint.

  0