Responsive Four Card Feature

Community feedback

• 

  P

  John Davidson•210

  @John-Davidson-8Posted 3 months ago

  Hi Carson,

  Fellow newbie here.

  Your project looks great. For me also it is a steep learning curve moving into CSS Grid. I could read as much theory all day long, but when it came to actually building a project with Grid, it was difficult.

  It is strange how projects can be completed in various different ways. The way I used Grid is different I think to the way you have done so. Our html is very similar, however, the CSS is varies, yet the outcome of how it looks on the browser is good. I will paste my css below:

      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 7.813rem 7.813rem 7.813rem 7.813rem 7.813rem;
      gap: 1.875rem;
    }
    .card img {
      margin-top: 2.5rem;
    }
    .card-yellow {
      grid-column: 2 / 3;
      grid-row: 3 / 5;
    }
    .card-aqua {
      grid-column: 1 / 2;
      grid-row: 2 / 4;
    }
    .card-red {
      grid-column: 2 / 3;
      grid-row: 1 /3;
    }
    .card-blue {
      grid-column: 3 / 4;
      grid-row: 2 / 4;
    }```
  
  As you can see I am also learning how to read other folks code and give feedback,  I find this very difficult when my own code has so many holes in it!!
  
  Anyway I hope this helps in some small way, as your code has helped me.
  

  Marked as helpful

  1

  ---

  

  P

  Carson Haskell•120

  @Carson-HaskellPosted 3 months ago

  @John-Davidson-8 haha thanks man, it’s nice to know I’m not alone in my struggle 😅

  I checked your project out and it looks fantastic! Your grid CSS is much more straightforward than mine, I love it—it’s almost overwhelming how many different ways you can solve the same problem 😂 Does this CSS exclude the responsive styling? How did you handle the change from the more complex desktop layout to the stacked mobile layout?

  Thanks for the feedback, I appreciate it!!

  0

  

  P

  John Davidson•210

  @John-Davidson-8Posted 3 months ago

  Hi @Carson-Haskell,

  Your still at the keyboard too lol😂.

  I actually completed this project last year, and have had a 6 month break away from coding, due to work stuff. So coming back I am reviewing my completed projects on the Learning Path on FEM, which was not available when I started. So having to re-learn stuff!!

  I think looking at this code, starting mobile first the main section on line 40 of the CSS I did section { display: grid; gap: 1.438rem; } When I commented this out on mobile view below 36rem, it stays the same, only the gap of 1.438rems is removed. The cards stay stacked. So perhaps I did not need Grid there, and only need it on the wider screen???

  I think I used Firefox Developer Edition browser which is excellent for Grid. When you open dev tools and tick Grid (overlay grid) it helps visualise the column and rows. I have given this 3 columns, and 4 rows and it shows on the grid where each card begins and ends in columns and rows. Therefore, for instance the yellow card (Karma) column starts at 2 and ends at 3, row begins at 3 and ends at 5.

  I am not good at explaining code, but Firefox Developer really helps me lay this out.

  Frontend Mentor for me is the best way to learn, trial and error and keep on building!!

  0