Testimonials-Grid-Section-Main

Community feedback

• 

  David Miguel Andrés•270

  @damigandPosted 4 months ago

  First of all, it looks great! Incredible job so far, love to see it! I'm going to break down a few things you can do to make your code a bit better.

  Responsiveness

  The reason why your design lacks a little bit of responsiveness in other screen widths is because there are a lot of explicit widths established. I recommend using the combination of width: 100% along with max-width in an element. At first, the element will take as much space to fill the max-width established, and the width: 100% ensures that the content will not overflow when the screen becomes smaller. Applying it to your code, you could change the grid elemement to the following:

  .grid {
    width: 100%;
    max-width: 1200px;
  }
  

  You'll notice that, with this change alone, the layout seems a bit off. This is because you also have to change the sizing of each individual card element to follow the same criteria. So you'll change card1 all the way up to card6 to have the following:

    width: 100%;
  

  You will notice a change in how the widths interact with each other this way, specially when you make the screen width smaller. You can also apply this same technique to height and max-height to make sure the content doesn't overflow down the bottom either, or at least make sure it looks great if it ever does overflow, although in your project, I think squeezing down the font-sizes will do the trick for you, to make sure the heights are not overflowing your page.

  CSS Grid

  While your code is not exactly wrong, it does have its limitations when you make use of the "card1 card1 card2 card3" kind of approach. I personally recommend using grid-template-rows and grid-template-columns for the grid element instead. This allows you to have more control over how much space can a row or a column take. This, with the combination of grid-row and grid-column on the card elements, makes up for a very solid, responsive way of organizing your layout. While I could explain how you can apply these CSS properties, I think this little chat box is pretty limited, so I think you'll be better off doing your own research.

  Media queries

  The media query established in your CSS applies on all screen sizes under 900px. However, you limit every element to take only 250px at most. This results in the elements being a bit too small within the range of 400px to 900px screen sizes. To fix this, you can simply use the trick we learnt earlier. Change your media query code of the card elements to the following:

  .card1, .card2, .card3, .card4, .card5, .card6 {
   width: 100%;
  }
  

  Isn't that much better? Now the elements take all the width of the screen (you can use different percentages if you want a bit of margin on the sides) and they become smaller as the screen size shrinks. Keep in mind that, if you use a percentage that's under 100% for these card elements, you might need to align them to the center by using justify-content: center or align-items: center in the parent card element. You can also align one specific card to the center by using justify-self: center or align-self: center instead.

  Don't be discouraged if things don't go your way while learning these little tricks. It only comes with time and practice, it takes some trial and error to learn in these cases. There are a lot of tutorials out there that explain these tricks better than I did, but if you found this response helpful, please consider marking it as such.

  Have a wonderful time coding, and the best of luck!

  Marked as helpful

  0