Product Preview page using HTML and CSS

Community feedback

• 

  Mauro Aguilar•70

  @mauro1998

  Posted about 3 years ago

  Hey Christian, congrats on completing the challenge. Here is a quick suggestion about how to define the dimensions of your container elements thinking on responsiveness and other good practices:

  I noticed that your div.content-card has the following styles:

  .content-card {
      border-radius: 15px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-right: 50%;
      transform: translate(-50%, -50%);
      width: 35%;
      height: 55%;
      background-color: #fff;
  }
  

  1- Try not to use % for dimensions (widths and heights). If you want this element to be responsive, a better approach could be:

  .content-card {
      width: 100%;
      max-width: 400px; // set a desired max-width in px or even better in em/rem unit
  }
  

  This way even if the screen size is bigger than 400px your element will always have a consistent width of 400px. Otherwise if the screen size is less than 400px it will adapt to the 100% of the space available because the max-width condition won't apply anymore which will make it responsive. This strategy is really easy to implement and you may not even need media queries.

  2- (optional) a good practice would be to separate the positioning styles (centering) from the other styles in a different class. This way you could easily:

  • Control when to center the container (if it was an actual application where you'd like to reuse the card component, it's very likely that you wouldn't want it to be centered by default, so instead you let the consumer center/position it).
  • Reuse this same class to center anything else, not just the card component (it becomes kind of a "util" class). Something like this:

  // this is just another approach for centering stuff using absolute positioning and margin: auto;
  .element-xy-centered {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
  }
  

  11

  Marked as helpful
• 

  Michael Obi•70

  @mykexie

  Posted about 3 years ago

  Try getting the structure first..

  • there's a container (main/div)
  • there are 2 DIVs in that container
  • First div is for the image
  • second div is for the details
  • second div has 5 divs : display flex, align items to center and justify content to space between.
  • 4th child of the second div has 2 divs : current price and canceled price, display flex.
  • last child has 2 divs : cart icon and text, display flex

  21
• 

  faizan•2,420

  @afaiz-space

  Posted about 3 years ago

  Hey @Christone007, congratulation on completing the challenges. I noticed many issues in your project. you use flex property in the project.

  10