Skip to content
Submitted 6 months ago

Product Preview Card Component

Paulkendrick2126•70
@Paulkendrick2126
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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...

Community feedback

  • Levi Kuhaulua•220
    @LeviKuhauluaPosted 6 months ago

    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.

    0
    Paulkendrick2126•70
    @Paulkendrick2126Posted 6 months ago

    Thank you, @LeviKuhaulua, for the comment. I'll definitely take your advice, especially on setting a defined width using the px unit instead of % so the column doesn't shrink relative to the viewport...

    If you don't mind, I'd love to connect with you and have more conversations...I wouldn't mind you sharing a social media platform you're most active on.

    0
    Levi Kuhaulua•220
    @LeviKuhauluaPosted 6 months ago

    Howzit, @Paulkendrick2126. I am probably the most active on LinkedIn - LinkedIn profile

    0

Please log in to post a comment

Log in with GitHub

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