Responsive LoopStudios Landing Page

Community feedback

• 

  Nick Carlisi•180

  @nickcarlisiPosted about 2 years ago

  Hi Ibrahim,

  Good job! A few things I noticed that might help. For your grid, I think you might be over complicating it a bit, which is something I used to do myself. I noticed that you made your grid-template-columns: repeat (12, 1fr), and then each "box" spans multiple columns, but I recommend just setting the columns to the exact amount that you need. For example, on mobile, you can literally make your grid-template-columns: 1fr and then set a media query for desktop and change it to grid-template-columns: repeat (4, 1fr). That way you should be able to avoid setting the grid children to span columns and rows. They should automatically fall into place.

  Another thing I would recommend is avoiding making the images in the grid background images. If you just make them images with a width and height of 100% and then add object-fit:cover, you should be able to avoid setting a specific height to your boxes. If you want to take it a step further, you can use the <picture> tag and set the srcset according to screensize to choose the "mobile" version at smaller screen sizes and the "desktop" at larger sizes.

  Hopefully, those suggestions help. Happy coding!

  0