Product landing card using CSS grid

Hello 👋

Well done on completing it

some tips to improve your code

HTML 📰

• for headings avoid using <p> tags. In <p id="heading-small">Perfume</p> replace the <p> tag with a <h1> , and replace <h1>tag in <h1>Gabrielle Essence Eau De Parfum</h1> with a <h2> tag. So you will have a top-level heading which is <h1> and a second-level heading <h2> which will greatly improve accessibility.

• avoid using <p> tag to display short texts(i.e <p id="price1">$149.99</p> and <p id="price2">$169.99</p>). Since the <p> tag is used to display descriptive text. Rather use <em>, <strong> or <small> tags. This will also improve accessibility.

the above-mentioned are semantic HTML and accessibility issues

Learn more about Semantic HTML here

Learn more about Accessibility here

CSS 🌈

• It is always considered good practice to use CSS custom variables. They will make life a lot easier as a web developer. learn more about it here

Other than that all looks great 🔥, you have used relative units which is great for responsiveness, and used a better approach to change images on mobile and desktop view

I hope you find this helpful 😄

KEEP IT UP

Hi, congratz on completing the challenge.

The thing with your responsive problem is from what i see you made your media like this @media only screen and (min-width: 1440px). This makes your container to stay like in mobile version until the screen reaches 1440px. You should try lower widths like 500px or 600px.

What is mean is @media only screen and (min-width: 600px) or @media only screen and (min-width: 500px) would be a better choice for breakpoints in this project.

Hope this was helpful.