Title: Size image
Last modified: November 8, 2019

---

# Size image

 *  Resolved [katfrajoe](https://wordpress.org/support/users/katfrajoe/)
 * (@katfrajoe)
 * [6 years, 6 months ago](https://wordpress.org/support/topic/size-image-4/)
 * Hi, as you can see the images are too big to have the 4 images on one row. How
   can I adjust the size?
 * Also I have overlapping blocks…
 * Thanks!
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fsize-image-4%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 8 replies - 1 through 8 (of 8 total)

 *  Plugin Support [Senff – a11n](https://wordpress.org/support/users/senff/)
 * (@senff)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/size-image-4/#post-12122564)
 * Hi [@katfrajoe](https://wordpress.org/support/users/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](https://cld.wthms.co/JsQkcj)
 * Once you change this number, the image size should change automatically.
 *  Thread Starter [katfrajoe](https://wordpress.org/support/users/katfrajoe/)
 * (@katfrajoe)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/size-image-4/#post-12122902)
 * For example
 * Under: nieuw binnen
 * There are 4 columns but you can see three on a row and then the fourth on another
   row.
 *  Plugin Support [Senff – a11n](https://wordpress.org/support/users/senff/)
 * (@senff)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/size-image-4/#post-12125095)
 * That’s not what I’m seeing on my end — for me, it looks OK with 4 per row:
    [https://cld.wthms.co/p2BrWU](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](https://wordpress.org/support/users/senff/).
 *  Thread Starter [katfrajoe](https://wordpress.org/support/users/katfrajoe/)
 * (@katfrajoe)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/size-image-4/#post-12125643)
 * 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](https://snipboard.io/GSCKc1.jpg)
   
   As I can see in your last screenshot that’s also visible on your end.
 *  Plugin Author [Albert Juhé Lluveras](https://wordpress.org/support/users/aljullu/)
 * (@aljullu)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/size-image-4/#post-12131086)
 * [@katfrajoe](https://wordpress.org/support/users/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](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](https://wordpress.org/support/users/senff/)
   provided will do the trick.
 *  Thread Starter [katfrajoe](https://wordpress.org/support/users/katfrajoe/)
 * (@katfrajoe)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/size-image-4/#post-12131369)
 * 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?
 *  Plugin Support [Senff – a11n](https://wordpress.org/support/users/senff/)
 * (@senff)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/size-image-4/#post-12132645)
 * 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;
       }
       ```
   
 *  Thread Starter [katfrajoe](https://wordpress.org/support/users/katfrajoe/)
 * (@katfrajoe)
 * [6 years, 5 months ago](https://wordpress.org/support/topic/size-image-4/#post-12149772)
 * Thanks! That worked!

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Size image’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/woo-gutenberg-products-block_71608f.
   svg)
 * [WooCommerce Blocks](https://wordpress.org/plugins/woo-gutenberg-products-block/)
 * [Support Threads](https://wordpress.org/support/plugin/woo-gutenberg-products-block/)
 * [Active Topics](https://wordpress.org/support/plugin/woo-gutenberg-products-block/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woo-gutenberg-products-block/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woo-gutenberg-products-block/reviews/)

 * 8 replies
 * 3 participants
 * Last reply from: [katfrajoe](https://wordpress.org/support/users/katfrajoe/)
 * Last activity: [6 years, 5 months ago](https://wordpress.org/support/topic/size-image-4/#post-12149772)
 * Status: resolved