3 Column Preview Card Component (Mobile-First)

Community feedback

• 

  Fat•910

  @FahatmahPosted almost 2 years ago

  Hello Kegan! 👋

  To answer you first question, you can try flexbox when the screen is in the desktop size, you see in the designs the first three elements which are the img, h2, and p, you can set the alignment to flex-start or you can just set the a to flex-end

  This is what I mean:

  .card {
     display: flex;
     flex-direction: column;
  }
  
  .card a {
     align-self: flex-end;
  }
  

  If the .card a won't work, just add justify-self: flex-end;

  Hope that works. 😁

  1

  ---

  

  Kegan•100

  @KeganFPosted almost 2 years ago

  @Fahatmah Thanks for your feedback!

  Using flexbox, I was able to find a way to recreate the same spacing as .button { margin-top: 4rem; }.

  After some experimenting, here's what ended up working:

  /*
  Setting a specified height for the card creates
  more room for the content to be spaced out
  */
  .card {  
    height: 450px;
    display: flex;
    flex-direction: column;
  }
  
  /*
  Turning on flex-grow for the paragraph above the button
  allows it to fill the extra space within the card
  */
  .card > p {
    flex-grow: 1;
  }
  

  The reason I left out align-self: flex-end is because align-self uses the cross axis for positioning. Because .card is using flex-direction: column, the cross axis is horizontal and positioning an element with align-self: flex-end (in this case) will align it with the right edge of the container.

  The reason I left out justify-self: flex-end is because the justify-self property is not used in flexbox, which I read about here.

  There's still more learning I have to do before I'm more confident with all the in-depth details of flexbox, so if I've missed anything please do let me know!

  Cheers! 😊

  1

  

  Fat•910

  @FahatmahPosted almost 2 years ago

  @KeganF Thank you for the article! Cheers too!

  1