Grid, Flexbox

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello John, nice solution you've!

  To fix the problem displaying only one column while in mobile, you can use the property, grid-template-columns: 1fr; this will turn your the box in a single column container.

  By the way, your solution seems pretty good, I think you can change only the container shadow to the proper shadow, box-shadow: 0rem 0.9375rem 1.875rem rgba(0, 81, 171, 0.148847); , this is really close to the box-shadow from the Figma design, you can try it.

  Congratulations!

  Marked as helpful

  1
• 

  P

  Alan Ibarra•440

  @Ibarra11Posted over 2 years ago

  The issue with the grid not aligning all in one column has to do with the previous declaration on the .card class. On the media query, you can specify that you want grid-template-columns: 1, which overrides the previous declaration, however the grid-template-areas: "header header" "signup list" is still applied to the element. For some reason, I am not quite sure, but grid-template-areas is adding 2 columns to each row even though we defined that it should be one column with grid-template-columns. So, what you need to do is inside the media query set grid-template-columns and grid-template-areas to overwrite the previous declaration.

  @media(query){
   grid-template-columns: 1fr;
   grid-template-areas: "header" "signup" ...etc
  }
  

  Marked as helpful

  1