Flexbox 3 Column Preview Card Component

I would suggest you to search more about breakpoints and media queries. I personally set my breakpoint at the width of 1024px(you can convert it to "em") so devices with a viewport width higher than 1024px(64em) desktop design of the page will be displayed. As well as devices with a viewport width lower than that will have the mobile design of the page. Why 1024px?, well we have to consider the tablets too. But this value can vary depending on how you want the content to be fit on the page.

Hi, Ashley! 👋

Congratulations on completing your first Frontend Mentor challenge! 🎉 Good effort on this challenge! 👍

Some areas that can be done better.

• There's no need to make the buttons to be postion: fixed;. It causes the buttons to overflow from the cards. Also, remove the width property from the button elements as well. It makes the buttons look so narrow.
• Remove the height from the div styling. Most of the time, you want to let the content inside it control its height of it. It's because of better responsiveness and maintainability. Also, I would not recommend setting the hieight with % because as you can see in the design comparison, the cards don't have the correct height.
• Use CSS to uppercase the text. The uppercased word in the HTML will be spelled by the screen reader (spelled letter by letter).

For your information, the sizes on the style-guide.md have nothing to do with the media queries. They are telling you that "this is how your website should look like at these screen sizes". As frontend developers, we should keep making your website looks good in between those screen sizes.

That's it! Happy coding! 😁