Product preview component using html and css

Community feedback

• 

  Fernanda•180

  @ferlagherPosted over 2 years ago

  Hi, Ravindra!

  There are many ways to make a design responsive. You can use media querys, relative units, flexbox, grid, or a combination of all of them.

  Here are some resources:

  • Media querys
  • CSS Units
  • Flexbox
  • Grid

  0

  ---

  

  Ravindra Suresh Kadam•80

  @socoolRKPosted over 2 years ago

  @ferlagher Thanks

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Ravindra, congratulations for having finished another challenge!

  I'm with your solution website open and the component seems great. You need only to fix some minor issues and apply a media query to display the component vertically as the mobile version.

  I'll give your some tips:

  1.Align your card component to the screen center using flexbox and height:100vh;. Note that the height:100vh will allow you to have the body displaying 100% of the viewport making easier to align, see the code below:

  body { display: flex; height: 100vh; align-items: center; justify-content: center; }

  2.Add a margin around the container to create a free space around the card and dont let the card touch the screen limit in smaller screens.

  body {margin: 20px;}

  3.Add a media query to change the card flow changing it to display one column and the content vertically. Not that a media query is a tool that allow your to apply changes to a certain element in a certain breaking point, in my following example the breaking point is width 700px. Code below:

  @media (max-width: 700px) { .container {display: flex;flex-direction: column; }}

  See the documentation about Media Query here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

  4.To change the text-decoration and add a line over the "discount price" you can use this property in the price element: text-decoration: line-through;

  Ravindra I think that applying these changes your card will be fixed. Feel free to ask me any question and I hope it helps you. Happy coding.

  0

  ---

  

  Ravindra Suresh Kadam•80

  @socoolRKPosted over 2 years ago

  @correlucas Thanks a lot for your suggestion and I will try to correct it.

  0
• 

  Rafi Mahmud Rizvi•130

  @RafiiMahmudRiizviiPosted over 2 years ago

  Hi Ravindra, i notice that the font-family of "$149.99" is not match with original design. If you change the font-family then your design look more beautiful.

  0

  ---

  

  Ravindra Suresh Kadam•80

  @socoolRKPosted over 2 years ago

  @RafiiMahmudRiizvii thanks for your suggestion and I did not notice the change while styling it.

  0