product preview card

Hi Naser,

When in mobile view (when the browser width is less than around 600px), your site is zoomed out (the text size is smaller than it should be). Add this style to solve it:

@media only screen and (max-width: 995px) {
  .container {
    ....
    max-width: 100%;
  }
}

• By adding max-width: 100%; to the .container inside the media query, it will make sure .container doesn't have wider area than the body.
• Add padding: 20px; to the body would be nice too.
• I think it's better to give padding to <div class="product-description col-lg-6 .col-md-12">, so that we don't need to give margin to every elements inside it.
• To create better positioning for the discounted price and real price, I would recommend placing them inside a container that has display:flex;.

Hope this helps. Happy coding