Home Prevent list containing an image from breaking
Reply: 2

Prevent list containing an image from breaking

BarrieO Published in 2017-12-07 21:45:55Z

I have the following lay-out on my website: List of products

This is actually the Woocommerce product list which is an unordered list.

The HTML of the list looks something like this:

<div class="widget widget_woocommerce_ndbproducts">
  <ul class="product_list_widget">                  
      <a href="https://www.slagerijrudi.be/product/broodje-ham/" title="Broodje Ham">
      <img src="//www.slagerijrudi.be/wp-content/plugins/woocommerce/assets/images/placeholder.png" alt="Placeholder" width="180" class="woocommerce-placeholder wp-post-image" height="180">Broodje Ham</a>
      <span class="woocommerce-Price-amount amount">
        <span class="woocommerce-Price-currencySymbol">€</span>

In order to have this list in 4 columns on desktop, I've added the following CSS:

@media screen and (min-width: 1025px) {
  .four-columns ul.product_list_widget {
      -moz-column-count: 4;
      -moz-column-gap: 20px;
      -webkit-column-count: 4;
      -webkit-column-gap: 20px;
      column-count: 4;
      column-gap: 20px;

However, as you can see by the red arrows in my screenshot, the <li> item gets a line break, which is not desired as the picture & price/text are no longer together this way.

Any ideas on how to prevent this? If you want to test: this is the link.

VXp Reply to 2017-12-08 00:04:17Z

You need to add the page-break-inside: avoid and break-inside: avoid (has greater browser support) to the li items, which then prevent breaking inside those elements:

ul.cart_list li,
ul.product_list_widget li,
.widget_product_categories li {
  page-break-inside: avoid;
  break-inside: avoid;
B. Scott
B. Scott Reply to 2017-12-07 23:34:38Z

Edit, new solution:

Now that I've had a look at it live, because each <li> other than the first one has a padding-top of 15px, the padding is what's pushing your second column down. If you can situate it so that the top item in every column doesn't have a padding-top, it should resolve your problem without needing anything extra and then you wouldn't have to worry about solving the line breaking itself. It's more of a padding/height issue than a line-break issue.

A min-height on your <ul> could also be a potential solution, but if you want the items to align better, solving the padding problem would be preferred.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.420229 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO