Hi @katfrajoe
Which section(s) are you referring to exactly?
Note that when you insert a block, you can change the number of columns:
https://cld.wthms.co/JsQkcj
Once you change this number, the image size should change automatically.
For example
Under: nieuw binnen
There are 4 columns but you can see three on a row and then the fourth on another row.
That’s not what I’m seeing on my end — for me, it looks OK with 4 per row:
https://cld.wthms.co/p2BrWU
In which browser do you see this?
EDIT: I notice you this indeed looks wrong in Safari. Adding the following CSS code should fix this:
.wc-block-grid.has-3-columns .wc-block-grid__product {
flex: 1 0 33%;
}
.wc-block-grid.has-4-columns .wc-block-grid__product {
flex: 1 0 24.9%;
}
-
This reply was modified 6 years, 5 months ago by
Senff - a11n.
In safari indeed. The code works but what if I want 5 columns? Do I just play around with the percentages?
The overlapping still remains then: https://snipboard.io/GSCKc1.jpg
As I can see in your last screenshot that’s also visible on your end.
@katfrajoe are you using Storefront theme or a child theme of it? There is a known bug in Safari and other WebKit browsers that breaks some rows:
https://github.com/woocommerce/storefront/pull/1217
This will be fixed in the next version of Storefront. In the meanwhile, a CSS code snippet like the one @senff provided will do the trick.
Storefront theme yes, not a child theme.
I can’t seem to get the code working for 5 columns.
And how do I fix the overlapping?
To make it work for 5 columns, add this:
.wc-block-grid.has-5-columns .wc-block-grid__product {
flex: 1 0 19.8%;
}
For the overlap, this is a bit of an edge case (when you have a 2-column block within a 2-column block on a full-width page). In your case, you can avoid that by adding this:
.storefront-align-wide.page-template-template-fullwidth-php .hentry .entry-content .wp-block-column .alignwide, .storefront-align-wide.storefront-full-width-content .hentry .entry-content .wp-block-column .alignwide {
margin-left: 0;
margin-right: 0;
}
