Responsive Card Component Using CSS Grid, Flexbox, and SASS

Hey, great work on this one. Though I had to zoom out because I can't see the desktop layout. Did you code this in large screen? Better test it for the usual 1366x768 screen ratio. Looking at the desktop layout, it is fine, the mobile layout seems fine as well.

Ammon and Kees already some some great suggestions, just going to add some as well:

• Lower down your media query breakpoint, right now you are only applying the desktop layout in @media screen and (min-width: 1440px) which is too big for lots of users, that is why they will need to zoom out as well. Lower it down to like 1000px or lesser, or just apply it when the layout really needs to be at the mobile layout.
• The main element does not need role="main" since it is already a main tag.
• When using section element, it requires a heading tag inside it. The section element that holds the img, it could be replaced with just div.
• Lastly, properly center the element. What you could do is, on the body tag, add css like:

body {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
 }

Also, this would really help you in the long run. Always apply:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after{
box-sizing: inherit;
}

This makes padding and margin not add any to the current size of the element. This makes your element easy to handle.

Aside from those, great work.

Hi, For color overlay try "mix-blend-mode" as property seen on https://www.w3schools.com

Very nice ! Try to fix the footer at the bottom of the page, with some:

footer{ text-align: center; bottom: 0; position: absolute; width: 100%; }

Best regards, Ammon :)