Icon List with 'horizontal-icon-list' class only showing 2 across

Hey JeffBianchi,

Thank you for the inquiry.

We can’t reproduce the issue on our end. Would you mind providing a screenshot? Please use imgur, savvyify or dropbox.

To display a list of items in a single row that only wraps to multiple rows if the size of the browser is too small, you’ll want to use a responsive layout. One way to do this is to use a flexbox layout, which allows you to control how items are laid out in a container.

Here’s an example of how you could use a flexbox layout to display your list of icons in a single row that wraps to multiple rows only if necessary:

1.) First, wrap your list of icons in a container element and give the container a class name (e.g. .av-custom-icon-list).

2.) Add the following CSS to your stylesheet:

.av-custom-icon-list {
  display: flex;
  flex-wrap: wrap;
}

3.) This will make the container a flex container and allow its items to wrap to multiple rows if necessary.

If you want to set a maximum width for the container so that it wraps to multiple rows on smaller screens, you can add a media query to your CSS like this:

@media (max-width: 800px) {
  .av-custom-icon-list {
    max-width: 33%;
  }
}

This will make the container wrap to multiple rows on screens that are 800px or smaller in width. You can adjust the value of 800px to set a different maximum width for the container.

4.) Finally, you can control the spacing between the icons by setting the margin property on the icon elements. For example:

.av-custom-icon-list .icon {
  margin: 0 10px;
}

This will add a 10px margin to the right of each icon, creating space between the icons.

I hope this helps! Let me know if you have any questions or need further clarification.

Best regards,
Ismael

Hi,

@guenni007: I mistakenly used Github markdown to wrap the css code, triple backticks, instead of just one. Fixed it.

Best regards,
Ismael