Problem with Woo Commerce product page on mobile

  • We have set up our webpage using the Hestia theme and Woo Commerce-store. It all looks fine on desktop but on mobile device the products on the product page looks terrible. Some of them get all squezed together/stretched and therefor it is hard to even read the product describtion – can someone please help? I am extremely new to developing, this is the first page I ever made.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello,

    This seems to happen only every two products, is that right? It looks like the problem is in the Theme’s media queries.

    To fix it, go to Dashboard > Appearance > Customize > Additional CSS and add the following code in the box:

    @media only screen and (max-width: 768px) {
   .woocommerce ul.products[class*=columns-] li.product, 
   .woocommerce-page ul.products[class*=columns-] li.product {
      width:100%;
   }
}

    Remember to click the Publish button before exiting the screen.

    Hope it helps.

    • This reply was modified 6 years, 7 months ago by Carme Mias.
    Thread Starter fridasjo

    (@fridasjo)

    Thank you so much @carmemias, that helped! ??
    But now I realized that it looks weird if I turn the mobile horisontally – is there any possibility to fix that as well?

    Hello there,

    What do you mean by weird? Can you give more detail of what it looks like and what should it look like instead?

    Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Problem with Woo Commerce product page on mobile’ is closed to new replies.