columns in mobile view

Home Forums Best Commerce columns in mobile view

This topic contains 6 replies, has 2 voices, and was last updated by  johnnyd 1 week, 1 day ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #9185

    johnnyd
    Participant

    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 this
    any ideas? I checked the style.css but couldn’t find it.

    #9191

    johnnyd
    Participant

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

    #9346

    johnnyd
    Participant

    uhm hello?

    #9597

    Axle Support
    Moderator

    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.

    #9606

    johnnyd
    Participant

    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!

    #9804

    Axle Support
    Moderator

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

    #9805

    johnnyd
    Participant

    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

    columns in mobile view from WordPress

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.