Three columns on iPad

Support
#1

Hi,

I´m using four column in my shop but I would like three columns between 768px and 979px and I´m having trouble fixing this using css. Any idea how to solve this?

Best regards
Melker

#2

Hey Melker,

This is not a feature offered in our themes. I will show you a CSS hack but please note that this will not be supported now nor in the future so if this doesn’t work in your site or would cause issues, you’d need to consult with a third-party developer.

Here’s the code you can add in Theme Options > CSS.

@media (max-width:979px) and (min-width:768px) {
    .woocommerce .cols-4 li.product {
        width: 30.33%;
        margin-right: 4.5% !important;
        clear: none !important;
    }
    .woocommerce .cols-4 li.product:nth-child(3n+0) {
        margin-right: 0 !important;
    }
}

You can see that I tested that and it works like in this video:

Hope that helps.

#3

Thank you for the code!
I actually already tried that but as you can see on the page in the secure note there is something wrong that I can´t seem to figure out.

#4

Hey Melker,

I don’t see the code added in the page so if you’ve added it, there might be a syntax error somewhere in your other CSS codes. Please try removing all of the custom CSS in your site and only add the code I’ve given exactly as pasted.

As you see in the screencast, the code will work. Since I’ve said it’s a hack, this does not mean we will support it as it’s not a part of our product. In this case, please consult with a third-party developer.

Thank you for understanding.

#5

The code is there but I changed the width and margin.
I removed all other css and the problem is still there.

@media (max-width:979px) and (min-width:768px) {
.woocommerce .cols-4 li.product {
    width: 32%;
    margin-right: 2% !important;
    clear: none !important;
}
.woocommerce .cols-4 li.product:nth-child(3n+0) {
    margin-right: 0 !important;
}

}

#6

Hey Melker,

I see what’s happening:

The code will not work for unequal product heights especially with masonry setup. You must set all product items to a fixed height.

Then it will display like this:

This is the furthest I could go. I already went above and beyond for this. I also said this is only a hack. If you wish this to be a part of the theme, we’ll list this as feature request instead so it might be taken into account in the future. For now, this is the farthest we can do.

If you wish to have more options, please consider using one of the bundled grid plugins as they allow a different number of column per screen size. Please see the items below:

Thank you for understanding.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.