columns in mobile view

This topic contains 12 replies, has 2 voices, and was last updated by  Axle Support 4 months, 4 weeks ago.

Viewing 10 posts - 1 through 10 (of 13 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

    #10076

    johnnyd
    Participant

    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?

    #10077

    Axle Support
    Moderator

    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.

    #10080

    johnnyd
    Participant

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

Viewing 10 posts - 1 through 10 (of 13 total)

You must be logged in to reply to this topic.