3-column preview card component using CSS grid

Community feedback

• 

  Julio Cinquina•270

  @JulioCinquina

  Posted almost 3 years ago

  Hi, Arush! Congratulations on your solution!

  Your card looks a bit narrow in the desktop layout because you have given width: 40% to its .content class. I believe this was meant for the mobile layout. To make it wider in the desktop layout, you can overwrite that declaration in your media query. For example:

  @media screen and (min-width: 1100px) {
      .content {
          width: min(57.5rem, 90%);
          grid-template-columns: repeat(3, 1fr);
      }
  /* ... */
  }
  

  width: min(57.5rem, 90%) means that the element will have a width of 57.5rem OR 90% of the parent element, whichever is smaller. So, if the user has set a bigger font size, the card will have, at most, a width of 90% of the screen (in this case, since the <main> element occupies the entire viewport).

  Since the paragraphs in each column have very similar lengths, making the card wider will make them have the same number of lines unless the user has set a bigger font size. In that case, they could have different numbers of lines, and the buttons wouldn't be aligned with each other.

  To improve that, you could organize the content of each column with Flexbox and then give your buttons a margin-block-start: auto. This will push the button to the bottom of the column, so, if the paragraphs had different numbers of lines, all the buttons would be aligned at the bottom.

  If you want, you can take a look at my solution of this challenge to have an idea of how I approached it.

  Also, take a look at Frontend Mentor's report about your solution, as it contains useful advice too.

  I hope this helps! Keep coding! 💻

  11

  Marked as helpful