Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product Preview Card Component

@ks5ks

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Could this be done without using @media query by using display: grid?

Community feedback

@clakr

Posted

Hi! 🙋‍♂️ Congrats on completing the challenge.

I've done this challenge through using display: grid on default (smaller screens / < 1440px) and providing grid-template-columns: on bigger screens, however this approach uses @media screen or basically media queries and if you want an alternative solution, there's that.

However, if you don't want to use @media for whatever reasons, I suggest looking into @container queries, and these are some resources that are helpful.

The only caveat for this is, it's still in development for Firefox, Firefox for Android, and Samsung Internet, but it's fully supported by other modern browsers. You can look into @container's Browser Compatibility.

If you have questions, concerns, feel free to bump me through this thread! 😁

Marked as helpful

0

@ks5ks

Posted

@clakr Thanks for the feedback and links, I really appreciate it. Kimball

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord