Displaying a List View in two or more columns

Sometimes the Listing View layout takes up too much horizontal space on your page:

By turning each entry listed into a block we could save much more space:

It's super simple to achieve this style because each listing is self-contained into a DIV tag which uses the class .gv-list-view.

By adding just these three additional lines to that class, we can achieve that block look:

.gv-list-multiple-container .gv-list-view{
    float: left;
    margin-right: 10px;
    width: 300px;
}

A screenshot of the Publish box, showing Embed Shortcode circled. To limit the changes to a specific View, replace viewID in the CSS below with the ID of the View you wish to modify:

Note: To find the View ID, edit the View. Find the Embed Shortcode in the Publish box. The number displayed in the shortcode is the ID of the View.

.gv-list-multiple-container.gv-container-viewID .gv-list-view {
    float: left;
    margin-right: 10px;
    width: 300px;
}

Here's how to add this additional style to your website:  How to add custom CSS to your website

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.