Four card feature section, featuring CSS grid and flexbox combo

Community feedback

• 

  Marit•400

  @MaritxxPosted over 2 years ago

  Hi! With how you have set up your media queries now, you will only go to the mobile design once your screen-width is smaller than 375px. Seeing as the design is wider, it cuts off most of the boxes. Along with that, screens that are over 1800px wide don't see the desktop design either as the cards appear as blocks under each other.

  You could start coding by setting up the mobile-layout (so the way you've coded for the media-query with a max-width of 375px). You would not need a media query for this. You then figure out at what width you could go to the desktop design and set up a media query for this. For example, a min-width of 782px. Then, every screen bigger than that would see your desktop design. You don't necessarily have to set both and min- and a max-width at the same media-query.

  It can be quite confusing when first starting to learn, but I'm sure you'll figure it out! Good job on your design! It looks great and just needs a little change on the media queries themselves to make it appear on different screen-widths. ^^

  Marked as helpful

  1