Issue with 3 Column grids on mobile view?

This topic has 9 replies, 2 voices, and was last updated 2 years, 1 months ago ago by Rose Tyler

  • Avatar: javtropic
    javtropic
    Participant
    February 16, 2022 at 04:04

    I would like my shop page to have a 3 column layout for the products. On desktop, it is easy, however as soon as i switch to mobile view it always sets it to 2 columns no matter what I do.

    I tried working around this by making a row with 3 columns in WPbuilder and using images that link to the product page, but for some reason the images have a lot of spacing in between them even though i have the spacing/gap and padding set to 0. I’m losing my mind

    8 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 16, 2022 at 11:04

    Hello,

    Thanks for using our theme.
    Please provide URL of page with products and temporary wp-admin access. Create an account via Dashboard (Users > Add new) with administrator role http://prntscr.com/s3rc9m > provide us with username and password via the Private Content area.

    Regards

    Avatar: javtropic
    javtropic
    Participant
    February 16, 2022 at 19:51

    I’ve provided the info in the private content area.

    I also have a problem with my home page, once again the space between the images is too big even though i haven’t added any padding.

    I previously used Uncode, which had a very nice feature that delayed the animations for the images, I had it set so all 3 appeared right after eachother by delayed them a different amount each, is there any way to do that here?

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 17, 2022 at 11:41

    Hello,

    Thanks for the reply.
    There is default margin https://prnt.sc/26xndg7 , set 0px here https://prnt.sc/26xnm60

    Regards

    Avatar: javtropic
    javtropic
    Participant
    February 17, 2022 at 18:10

    you only answered one of my questions, and funny enough it’s the only one that didn’t matter as much. what about everything else ?

    the main issue with the shop grid is most important please help.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 18, 2022 at 07:13

    Hello,

    Try to add the next custom CSS code in Theme Options > Theme custom CSS > Global:

    @media (max-width: 768px) {
        .col-sm-6.product {
            width: 33.33333333% !important;
        }
        body .row-count-3 .product:nth-child(2n+1) {
            clear:none !important;
        }
    }
    @media only screen and (max-width: 320px) {
        .products-grid .product {
            width: 33.33333333% !important;
        }
    }

    Regards

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 18, 2022 at 08:06

    About animations, you can activate Massive Addons for WPBakery Page Builder plugin (XStore > Plugins Installer), this plugin offers new elements and advanced settings for animations. Here are example – https://massive.mpcthemes.net/animations/

    Regards

    Avatar: javtropic
    javtropic
    Participant
    February 19, 2022 at 00:31

    somehow this made things worse

    screenshot of the result

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 19, 2022 at 07:16

    Hello,

    I’ve added the code and Published it. You need to close the Customizar, then you will see how the code works on the Shop page, even you open Theme Options > one more time, all will be fine – https://prnt.sc/g5o-J0zsVQTT

    Regards

  • Viewing 9 results - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.