responsive product preview card using flexbox and image css properties

Community feedback

• 

  P

  Mihailescu Fanush•690

  @FanushhhPosted over 1 year ago

  Hey Mark,

  Great solution overall, love that you added an animation as well, it's a nice touch.

  Your problem mostly appears from setting heights and widths in unnecessary places, for instance, you don't need widths on the box nor the "perfum" container, having it set kills your responsiveness because you're basically communicating to the DOM that your object will have that specific width no matter what.

  So first things first, remove any width you got on your children containers and set a max-width and a width of 100%(this one is debatable because if you have elements that have display: block, they will automatically occupy 100% of the container block). Max width works by telling the container that he can occupy 100% of the available space, but if the width of the viewport gets bigger the card itself will limit its width to the specified max-width.

  Additionally, if you wanna center things off, maybe you can try adding display flex, justify content center and align items center along with a min-height of 100vh( this is important because the content will only be aligned based on the size of the body, and if your body is as big as your children elements, you won't see any alignment on the vertical axis.

  Hope this helps and happy coding, Fanush

  Marked as helpful

  1

  ---

  

  Mark Morán•40

  @mark-lexPosted over 1 year ago

  @Fanushhh thanks mate. I'll check my code again.

  0