3-column preview card component

Hey @al-latte,

To fix the accessibility issue in the accessibility report, you can insert a visually hidden h1 tag into your page. Use this <h1 class="visually-hidden">3 column preview card component</h1> element at the top of your document.

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

I hope this is helpful. 😊

:D

Hi @al-latte, 👋

Good job on this challenge. 🎉

Yes, you definitely want to start with mobile development first. When you start this way, it is a good starting basis for responsively changing your layout at larger screen sizes. But, you should keep the desktop layout in mind to plan ahead for any major layout changes.

You might want to consider starting with this @media (min-width: 768px) for your media query. This means that starting at the smallest screen size and up to 767px, you should have a flex column direction. Then, any screen size 768px and above will have a flex row direction.

I like to be consistent and use the min-width media query property. If you also want to have a query for a larger screen size like 1000pxor so, make sure to always put the larger screen size query before the smaller screen size query. The order matters.

I hope this is helpful. 😊

:D