If you want to make items in Shortpoint's Simple-list, Image-list or File-list appear side-by-side without using Shortpoint's columns, you have come to the right place. In this article, we will go over how this can be achieved easily. This means generated list items from connected elements can be displayed side-by-side after applying this solution.


Before we start


In this article we will be working with an Image-list containing 6 items. We will make it so that up to 4 items are displayed side-by-side on each row. This solution is not limited to 4 items per row, later on in this article I will show you how to you can display up to 2, 3, 4, 5, 6, 7 or 8 items per row.


As you can see in the screenshot below, each item in the list is displayed below the previous item.


And here is a screenshot of how we want the list items to appear (we want up to 4 items to appear side-by-side):




Solution

The four step solution detailed below will work for any of File-list, Simple-list or Image-list.


Step 1.

Copy the CSS code snippet below. The CSS snippet below will display up to 4 items on each row. Code snippets for 2, 3, 5, 6, 7, 8 items per row has been included at the end of this article.

display: flex;
flex-flow: row wrap;

.shortpoint-listitem-wrap, .shortpoint-listitem-wrap > div {
  display: block;
  width: 100%;
  overflow-x: hidden;
}

.shortpoint-listitem {
    box-sizing: border-box;
    flex-basis: 25% !important;
    width: 0 !important;
    margin-top: 0px !important;
    border-bottom: none !important;
    padding: 15px;
}

.shortpoint-listitem-wrap {
  margin-bottom: 0px !important;
}



Step 2.

Edit your page and click on the settings icon for any of either Simple-list, Image-list or File-list component.



Step 3.

Click on the custom CSS tab and paste the CSS snippet we copied earlier in the custom CSS text-box.



Step 4.

Click Update and save the page to view the updated Simple-list, Image-list or File-list component.




Code Snippets for different item number per row


Simply replace the code snippet in step 2 with any of the below:

  • 2 Items per row
    display: flex;
    flex-flow: row wrap;
    
    .shortpoint-listitem-wrap, .shortpoint-listitem-wrap > div {
      display: block;
      width: 100%;
      overflow-x: hidden;
    }
    
    .shortpoint-listitem {
        box-sizing: border-box;
        flex-basis: 50% !important;
        width: 0 !important;
        margin-top: 0px !important;
        border-bottom: none !important;
        padding: 15px;
    }
    
    .shortpoint-listitem-wrap {
      margin-bottom: 0px !important;
    }
  • 3 items per row
    display: flex;
    flex-flow: row wrap;
    
    .shortpoint-listitem-wrap, .shortpoint-listitem-wrap > div {
      display: block;
      width: 100%;
      overflow-x: hidden;
    }
    
    .shortpoint-listitem {
        box-sizing: border-box;
        flex-basis: 33.33% !important;
        width: 0 !important;
        margin-top: 0px !important;
        border-bottom: none !important;
        padding: 15px;
    }
    
    .shortpoint-listitem-wrap {
      margin-bottom: 0px !important;
    }
  • 4 items per row
    display: flex;
    flex-flow: row wrap;
    
    .shortpoint-listitem-wrap, .shortpoint-listitem-wrap > div {
      display: block;
      width: 100%;
      overflow-x: hidden;
    }
    
    .shortpoint-listitem {
        box-sizing: border-box;
        flex-basis: 25% !important;
        width: 0 !important;
        margin-top: 0px !important;
        border-bottom: none !important;
        padding: 15px;
    }
    
    .shortpoint-listitem-wrap {
      margin-bottom: 0px !important;
    }
  • 5 items per row
    display: flex;
    flex-flow: row wrap;
    
    .shortpoint-listitem-wrap, .shortpoint-listitem-wrap > div {
      display: block;
      width: 100%;
      overflow-x: hidden;
    }
    
    .shortpoint-listitem {
        box-sizing: border-box;
        flex-basis: 20% !important;
        width: 0 !important;
        margin-top: 0px !important;
        border-bottom: none !important;
        padding: 15px;
    }
    
    .shortpoint-listitem-wrap {
      margin-bottom: 0px !important;
    }
  • 6 items per row
    display: flex;
    flex-flow: row wrap;
    
    .shortpoint-listitem-wrap, .shortpoint-listitem-wrap > div {
      display: block;
      width: 100%;
      overflow-x: hidden;
    }
    
    .shortpoint-listitem {
        box-sizing: border-box;
        flex-basis: 16.667% !important;
        width: 0 !important;
        margin-top: 0px !important;
        border-bottom: none !important;
        padding: 15px;
    }
    
    .shortpoint-listitem-wrap {
      margin-bottom: 0px !important;
    }
  • 7 items per row
    display: flex;
    flex-flow: row wrap;
    
    .shortpoint-listitem-wrap, .shortpoint-listitem-wrap > div {
      display: block;
      width: 100%;
      overflow-x: hidden;
    }
    
    .shortpoint-listitem {
        box-sizing: border-box;
        flex-basis: 14.2857% !important;
        width: 0 !important;
        margin-top: 0px !important;
        border-bottom: none !important;
        padding: 15px;
    }
    
    .shortpoint-listitem-wrap {
      margin-bottom: 0px !important;
    }
  • 8 items per row
    display: flex;
    flex-flow: row wrap;
    
    .shortpoint-listitem-wrap, .shortpoint-listitem-wrap > div {
      display: block;
      width: 100%;
      overflow-x: hidden;
    }
    
    .shortpoint-listitem {
        box-sizing: border-box;
        flex-basis: 12.5% !important;
        width: 0 !important;
        margin-top: 0px !important;
        border-bottom: none !important;
        padding: 15px;
    }
    
    .shortpoint-listitem-wrap {
      margin-bottom: 0px !important;
    }


Extra Tips


  • To increase or decrease the spacing between the list items, simply increase or decrease the number on line 15: padding: 15px; in any of the snippets above. So to increase the spacing, I could for example change 15 to 25 and that line becomes padding: 25px; and my snippet for up to four items per row would become:
    display: flex;
    flex-flow: row wrap;
    
    .shortpoint-listitem-wrap, .shortpoint-listitem-wrap > div {
      display: block;
      width: 100%;
      overflow-x: hidden;
    }
    
    .shortpoint-listitem {
        box-sizing: border-box;
        flex-basis: 25% !important;
        width: 0 !important;
        margin-top: 0px !important;
        border-bottom: none !important;
        padding: 25px;
    }
    
    .shortpoint-listitem-wrap {
      margin-bottom: 0px !important;
    }
  • You might have noticed how only this line of code: flex-basis: 25% !important;, changes when we want to change the number of items per row. Specifically, only the percentage changed. The percentage represents 100 divided by the number of items you want to display on a row. So if you want to display up to 16 items on a row, simply divide 100 by 16, which will result in 6.25. So to display up to 16 items on one row, simply change that one line of code to flex-basis: 6.25% !important; 

  • Also you might want the image in each item to be centered. To achieve this, simply add the CSS snippet below to that of either 2,3,4,5,6,7 or 8 items per row.       

.shortpoint-listitem-wrap > div {
  position: relative;
  transform: translateX(-50%);
  left: 50%;
}





I hope this article was helpful.