Skip to content
Submitted about 1 year ago

Product Preview Card Component

pure-css, accessibility
Paulkendrick2126•70
@Paulkendrick2126
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm particularly proud of finishing a project, you know, seeing it through, working through the challenges and issues.

What challenges did you encounter, and how did you overcome them?

Mostly in the styling aspect of the project. Responsive design especially: I need to work on it more.

What specific areas of your project would you like help with?

I would like help with using and understanding Media Queries, working with 2 div columns...

Code

Please log in to post a comment

Log in

Community feedback

  • Levi Kuhaulua•220
    @LeviKuhaulua

    Howzit, for media queries, you can put the elements that need to be changed instead of putting all elements inside of it. That way it helps with making the code easier to follow. For 2 column layouts, when your parent container has a display: flex and a width: 50%, what will happen is that the elements will shrink or expand to fit the width of their parent container. What you can do instead is set a defined width such as width: 300px so that the columns will not shrink as the viewport size gets smaller, then you can use a media query to handle how the component should look like at smaller screen sizes.

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