columns in mobile view

[Anonymous]

Hello guys, I am trying to edit the columns in mobile view, when I go to a product category page for example this one it looks like
any ideas? I checked the style.css but couldn’t find it.

[Anonymous]

I could not find where to change just for the mobile version from columns-3 to columns-2

[Anonymous]

uhm hello?

[Axle Support]

When checking your site, I found that .woocommerce ul.products.columns-3 li.product, .woocommerce-page ul.products.columns-3 li.product custom style is conflicting. There you have assigned 30% width. Please configure width around 50% for responsive devices. This should fix the issue.

[Anonymous]

That is the woocommerce style that overrides the theme for some reason. I have added the following lines of code:
@media only screen and (max-width: 768px) {
.woocommerce ul.products.columns-3 li.product,.woocommerce-page ul.products.columns-3 li.product{width:48%}
woocommerce-page.columns-3 ul.products li.product,.woocommerce.columns-3 ul.products li.product{width:48%}}
which overrides the woocommerce.
As for the theme style, it is the first thing I tried to edit but it did not work!

[Axle Support]

I am seeing 2 columns in mobile device. Looks like you are able to fix it.

[Anonymous]

there seems to be an issue with the theme, it doesn’t override the woocommerce css if you add it to the style.css, but if I add the code via the customizer it works, with some help from a guy in reddit I added the following lines of code in the customizer

@media only screen and (max-width: 768px) {
.woocommerce ul.products.columns-3 li.product,.woocommerce-page ul.products.columns-3 li.product{width:48%}
woocommerce-page.columns-3 ul.products li.product,.woocommerce.columns-3 ul.products li.product{width:48%}}

this is the topic if you want to check it out
https://www.reddit.com/r/Wordpress/comments/aacjqg/columns_in_mobile_view/

[Anonymous]

Now I seem to have another issue with the columns in the mobile, the products in the caterories seem to be working fine, but the related show as the picture above, I couldn’t make it work like the above any ideas?

[Axle Support]

There is custom CSS added on the site. Probably you have added the following CSS

.woocommerce .related ul li.product {
    width: 22% !important;
    clear: none;
    margin-right: 4%;
}

Please add this CSS only for devices having viewport higher than mobile so that the code you have added will not affect mobile layout.

For Ex: You can add that code like

@media only screen and (min-width:767px) {
    .woocommerce .related ul li.product {
        width: 22% !important;
        clear: none;
        margin-right: 4%;
    }
}

You can change screen size as per your requirement. You can use @media only screen and (max-width: ) as well if required.

[Anonymous]

I have added in the custom css (customizer) your code but I am still getting this

[Author]

Posts