Woocommerce Products Page

Hello @thewildbonbon,

Thank you for reaching out!

I am using elementor for my site builder. My products page looks fine on desktop and tablet views, but on my phone

Seems like this only happens on the front page. As a temporary workaround, you can try adding the following CSS snippet:

/*   Change grid property to fix mobile layout

     Source: https://www.ads-software.com/support/topic/woocommerce-products-page-2/

 */

@media (max-width: 544px) {
  .ast-container .woocommerce ul.products:not(.elementor-grid) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  }

You can find step-by-step instructions on adding custom CSS to your theme in this guide: WPBeginner’s guide on adding custom CSS to WordPress.

Additionally, I recommend reaching out to the author of your theme since the issue doesn’t seem to be related to WooCommerce. :?)

Let us know if you have any other questions!

Thank you!!! That worked.

Kathy

Hi @thewildbonbon,

I’m glad we were able to help! If it isn’t too much to ask for – would you mind leaving us a review here?

It only takes a couple of minutes but helps us tremendously. It would mean so much to us and would go a really long way.

Meanwhile, I’ll mark the thread as solved for now, but feel free to open a new one if you have any other questions.

Thanks!