Skip to content
OverviewSolutions
12
Comments
3
mihai2537
@mihai3636

All comments

  • Abdelrahman mohamed•230
    @Tayara97
    What are you most proud of, and what would you do differently next time?

    .

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

    0

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

    .

    Responsive Product Card

    1
    mihai2537•190
    @mihai3636

    Hello, there!

    Very nice solution! Here are some tricks which I hope you might find helpful:

    • you could set the body min-height to 100vh, make it a flex container and justify-content center and align-items center, then the product will be centered. Something like this:
    body {
 min-height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}

    By doing this you could get rid of the margin auto trick and you'll have it vertically centered as well.

    • nice attempt with the before price. If you'd like the line to cross the old price, all there is left to do is to use bottom: 50%;
    .product-box .info .before-sale::before {
 bottom: 50%;
}
    • another nice way to solve this line cross would be to make use of the <s> tag. It's a more semantic html way of crossing some text, you should google it.
    • last but not least, I would add some more top and bottom padding to the right panel
    • I also think the button has a different font from the design, you should check out the style guide for the 2nd font

    Let me know if you've got any questions, keep up the good work!

  • mihai2537•190
    @mihai3636

    Hey, there!

    The component looks neat, great job! If you had troubles to reproduce the discs from the background, this is how I'd do it:

    • The top left disc seems to be a gradient from normal blue (the one you used in the background) to a lighter blue.
    • The bottom right disc is just light blue.
    • To place the discs, I would use position: absolute and place it relative to the main container. (if you don't know how to do that, google mdn css position absolute and if you still have troubles then ask here). You will also have to use a higher z-index to the card component in order to make it appear above the discs.
    • You could also try to give some shadow to the card, this is how the design seems to look like. I'd go first with something very little like shadow-box: 0 0 20px rgb(0, 0, 0, 0.1) and then see from here. Maybe increase / decrease the spread and the opacity.

    Let me know if something is not clear or if you disagree.

    Once again, great job and keep it up!

    Marked as helpful
  • mihai2537•190
    @mihai3636

    Hello!

    I'm not entirely sure if that is a good practice or not, but I could share a piece of advice that I just received as well.

    I noticed that you used "height: 100vh" there. That is going to cause problems if you zoom by ctrl + "+". (go more than 150% and your content will be cropped)

    The reason is this: when you zoom, the size of everything else changes, but the size of your container will stay constant at whatever 100vh is. (This happens because your viewport has the same height whether you zoom or not. So 100vh will be the translated to the same value in pixels before and after the zoom)

    If the size of everything else increases but the container's height is the same, it leads to overflow and that's why you see the component appear as cropped.

    The solution is to use min-height: 100vh;

    Also, congrats for your submission! The card looks neat!

    I hope I was clear enough and please take what I said with a grain of salt and do your own research as what I just told you is my own interpretation of my own research and I do not claim to be 100% right.

    Marked as helpful