Home Prevent list containing an image from breaking
Reply: 0

Prevent list containing an image from breaking

user1614 Published in March 24, 2018, 12:44 am

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.

You need to login account before you can post.

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

© 2016 Powered by mzan.com design MATCHINFO