Skip to content
Submitted over 1 year ago

Product preview card component

George Bleyer•280
@georgebleyer
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

Hello DEVS

In this project I had some difficulties.

  1. Center the <div class="container"> in the center of my page, as I wasn't able to center it, I put a margin and it stayed like this;
  2. For the responsive site it was ok but I thought that for the cell phone it was a little small;
  3. I couldn't change images so I just fixed the height and width of it.

If you have any tips, leave them in the comments.

Community feedback

  • Tiago Ribeiro•80
    @TiagoRidevPosted over 1 year ago

    Hi George. Congratulations for the challenge!

    I would like to give you a suggestion to center your container, try to use these properties in css. .container{ display: flex;
    justify-content: center; align-items: center; flex-direction: column; height: 100vh; }

    Congrats for the project. I hope this feedback is helpful for you.

    Marked as helpful
    0
  • Jose Pablo Sequeira•50
    @joseSequeira95Posted over 1 year ago

    Hello George! Congrats on solving this challenge. You have done great. For changing the image for both mobile and desktop, you can make this work by adding a class that has a display:none property in the media queries section. This way you can set to only display the deskop image when we are viewing on desktop devices while having the mobile hidden. Then when we shrink the screen size the desktop image will dissapper and we will only be able to see the mobile one.

    I have also solved this challenge, take a look at my solution if you find it helpful. Happy coding.

    Marked as helpful
    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