Mobil Shop/Product Archive Columns Too Narrow

Hi @bsktbllsam,

Thank you for reporting this. We will look into this.

In the meantime, please try adding the following CSS code in Appearance > Customize > Additional CSS

@media (max-width: 768px) {
    .woocommerce[class*="columns-"].columns-3 > ul.products li.product {
        width: unset;
    }
}

I hope it will help and we are sorry for the inconvenience you may have because of this.

Kind regards,
Herman ??

P.S. We recommend reaching out to us through our Support Portal for faster and quicker help and resolution as mentioned here.

Hi @brainstormteam

I added the CSS Code as suggested. This has fixed the issue for mobile, however, the issue is still there for the in between breakpoints (I guess it would be tablet mode). If you are on desktop, slowly make the window more narrow, and you will be able to see it. I have 3 columns displayed fine at full width, then as I make the window more narrow it seems to break, before finally returning to normal.

For clarity: Approximately 922px – 768px doesn’t work. Above 922px it looks normal, below 768px looks normal, everywhere in between it doesn’t. Thank you for the fix in the meantime!

Hi @bsktbllsam,

Please try using the following CSS code instead

@media (max-width: 922px) {
    .woocommerce[class*="columns-"].columns-3 > ul.products li.product {
        width: unset;
        margin-right: unset;
    }
}

I hope it helps.

Kind regards,
Herman ??

@brainstormteam

This worked, thank you!

@media (max-width: 922px) {
.woocommerce[class*=”columns-“].columns-3 > ul.products li.product {
width: unset;
margin-right: unset;
}
}

Good to know that @bsktbllsam!

Please mark the topic as resolved and do let us know if there’s anything else we can help you with.

Kind regards,
Herman ??