Product Page - Responsive CSS

Community feedback

• 

  Gaurav Pratap Singh•340

  @gauravsingh1281Posted about 2 years ago

  Hii Nick, Congratulations on completing this challlenge 👏👏. I have a suggestions for you. You didn't use the use hovering effect and cursor pointer property on the button element when a user hover the button there should be a hovering effect and cursor which make your website more interactive.

  Another thing i noticed that your site become unresponsive below 400px width, to solve this problem you can give width in px, em, rem instead of % to the div of class card i.e <div class="card container"> and also give some padding to the <div class="info-box six columns" >
  and for the pricing section wrap them in a another div and give a class of pricing-section and center them with a CSS display Flex Property like this --

  <div class="pricing-section">
  <span class="new-price">$149.99</span>
  <span class="old-price">$169.99</span>
  </div>
  
  .pricing-section {
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  Marked as helpful

  1

  ---

  

  Nick•160

  @HarmoniaCodesPosted about 2 years ago

  @gauravsingh1281 Hello Gaurav! Thank you for your suggestions! Can you give more info on what you mean by "your site becomes unresponsive below 400px width?" On my setup, the layout turns to the mobile version below 400px, with the columns stacked on top of each other. In regards to the hover effects, I noticed that it was mentioned in the challenge, but no info provided in the style guide. I can add this in with an update.

  Thanks!

  0

  

  Gaurav Pratap Singh•340

  @gauravsingh1281Posted about 2 years ago

  @HarmoniaCodes " your site becomes unresponsive below 400px width " it means that your whole container section and the text which are inside in it also moves to the left side of the screen and the some part of your text start becoming unvisible .The Container should be in the center of the screen for all the devices and give some padding to text section.

  For more details you can also go through my solution -

  0