Return to previous page

Issue with 3 Column grids on mobile view?

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

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

#317271 Copied Theme version: 8.1 WooCommerce version: 5.9

8 Answers

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

#317331 Copied

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.

#317432 Copied

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

#317494 Copied

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.

#317583 Copied
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
#317607 Copied
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

#317616 Copied

javtropic

Participant

February 19, 2022 at 00:31

somehow this made things worse

Please contact administrator
for this information.

#317755 Copied

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

#317772 Copied
Tagged: 3 column grids, best selling, issue resolution, mobile view, seo friendly, woocommerce themes
Viewing 9 results - 1 through 9 (of 9 total)