Feature-Cards

Community feedback

• 

  Abdullah•340

  @ASH2001princePosted about 2 years ago

  Hello Wojtek Natkaniec congratulations for this project

  • I think you have a super responsive design here but I have something that I noticed like the main height if you remove the margin : 0 0; and add a padding : 20px the height of the page would be much better.
  • I`m not sure about this but I think working on the grid system here if easer I have done this project before and this is how I worked on the main container:

  .cards{
      display: grid;
      grid-template-columns: repeat(4, auto);
      justify-content: center;
      align-items: center;
  }
  

  Hope you find it helpful

  0
• 

  Ahmad Hamido•170

  @AhmadHamidoPosted about 2 years ago

  Hello Wojtek. -First, I would like to tell you that you did a really good job with your layout. -Second, I don't know if you have studied grid yet or have enough knowledge about it, but I would recommend you doing the layout using grid, because first it would allow you to write way less code, and second, it would be easier to place stuff in your layout. -Third, I would do something like this:

  .sub-container {
      max-width: 1000px;
      display: grid;
      grid-template: repeat(12, 30px) / repeat(3, 1fr);
      grid-column-gap: 20px;
    }
  
    .box-1 {
      grid-column: 1;
      grid-row: 5 / span 8;
    }
  
    .box-2 {
      grid-column: 2;
      grid-row: span 8;
    }
  
    .box-3 {
      grid-column: 2;
      grid-row: 9 / span 8;
    }
  
    .box-4 {
      grid-column: 3;
      grid-row: 5 / span 8;
    }
  

  I hope this would help. Happy coding! :D

  0