Mobile Shop Page Distorted

Hi @rachelsep,

There’s a responsive option to configure the number of columns. Refer to this screenshot, please. You can find it on the Customizer > WooCommerce > Product Catalog.

Let us know if you need more help, otherwise please mark the topic as Resolved.

Kind regards,
Herman ??

Hi Herman. If you read in my initial post, I already went into Appearance > Customize > Woo commerce > Product Catalog > Shop Column = 1 column.

The mobile responsive setting is already set to 1 column, but when you go to view the shop page on mobile it is showing 2 columns. What other things can I try?

Hi @rachelsep,

I am not sure how I can miss that part. I definitely needed more coffee at the moment I wrote down my response above ??

The Shop is using Elementor template, right? Well, I can confirm that the same thing is happening on my end. We will try to fix this ASAP. Sorry for the inconvenience.

Kind regards,
Herman ??

Hi. My shop page is still distorted. Can you please follow up on this issue? Thank you!

@bsfherman Hi. My shop page is still distorted. Can you please follow up on this issue? Thank you!

Hi @rachelsep,

Sorry for the inconvenience.

Please add the following CSS code in Appearance > Additional CSS as a temporary solution

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

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

See if it works well for you.

Kind regards,
Herman ??

This worked! Thank you so much!