Product preview component using html and css

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

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.

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.