Product preview card component

Community feedback

• 

  Samuel Llibre Santos•400

  @Zyruks

  Posted about 3 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 ;)

  02

  Marked as helpful
• 

  Antonain E.•220

  @antoebtfr

  Posted about 3 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 !

  00