Product preview card component

Community feedback

• 

  Samuel Llibre Santos•400

  @ZyruksPosted over 2 years ago

  Hey how is everything? Hope all good.

  Here my Tips:

  1: for the image to occupy the 100% of the height first put

  .perfume-container {
   max-height : 600px;
  }
  
  .perfume-picture {
  width : 50%;
  }
  .perfume-container .perfume-picture img {
   height: 100%;
  }
  

  that should make the img 100% height.

  2: to align the content to the center you can delete the margin on .perfume-container and add display:flex to body and flex-direction column.

  If you need help with anything just text me me ;)

  Marked as helpful

  0

  ---

  

  Nelson Rosario•50

  @NellyisDevvPosted over 2 years ago

  @Zyruks

  Thanks for the response, it was really helpful! I've made some changes to make it work a bit better, for some reason Firefox styles are not accurate when compared to other browsers and also the mobile view for Firefox seems to be buggy for me, if you have any idea what that could be I would really appreciate any tips!

  0

  

  Samuel Llibre Santos•400

  @ZyruksPosted over 2 years ago

  @NellyisDevv

  Hmm can you show me some picture, let see what's happening.

  0
• 

  Antonain E.•220

  @antoebtfrPosted over 2 years ago

  Hi,

  Excuse me in advance if I make some English mistakes

  @media only screen and (min-width: 375px) and (max-width: 760px)

  There is two things

  1. I think this exercise wanted to give 375px as the value for mobile devices so it needed to be set as the max-width

  2. With this code, your website reverts to desktop format below the min-width value which is not desirable. ( + the modal is not correct anymore, the white background on the right side disappears )

  For the details :

  The " Add to Cart " button is not centered horizontally

  
  .perfume-container .perfume-information button img {
       height: 2vh; 
       align-items: center; (not needed)
       position: relative; (not needed)
      left: 24px;
  }
  
  .perfume-container .perfume-information button #text {
      /* position: relative; */ (not needed)
      /* left: 80px; */ (not needed)
      bottom: 3px;
      font-family: "Montserrat", serif;
      font-weight: 600;
  
  .perfume-container .perfume-information button { 
      [...]
      cursor: pointer;
      position: relative; (not needed)
      right: 5px;
     /* New lines */
      justify-content : center;
      align-items: center;
  

  To simplify responsive, you can use the vw, vh units and max/min-width with absolute value to delimitate if necessary

  Feel free if you want to ask for more tips and your website is pretty good btw !

  0