Bug 2 – Columns Display of Search Results

When I make a search in the search bar, the number of columns is not always identical.

In the screenshot 1, we have 11 results :
– The first 8 are displayed in 4 columns
– The last 3 are displayed in 3 columns
Why? It should always be 4 columns and whatever the number of items the last raw, it should be sticked to 4 columns and aligned to the left. Meaning that in this case, the last raw would have 4 columns with the last column empty.

In the screenshot 2, we have 10 results :
– The first 8 are displayed in 4 columns
– The last 2 are displayed in 2 columns
Why? It should always be 4 columns and whatever the number of items the last raw, it should be sticked to 4 columns and aligned to the left. Meaning that in this case, the last raw would have 4 columns with the last 2 columns empty.

Attachments:

You must be logged in to view attached files.

Hi,

It is not a bug but how CSS flexbox layout works in our theme. You can change it with the following custom CSS code

.search-extended .autocomplete-suggestions .autocomplete-suggestion {
    -ms-flex-preferred-size: calc(25% - 25px);
    flex-basis: calc(25% - 25px);
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
}

@media (max-width: 1024px) {

.search-extended .autocomplete-suggestions .autocomplete-suggestion {
    -ms-flex-preferred-size: calc(33.33333% - 22px);
    flex-basis: calc(33.33333% - 22px);
}

}

Regards

Thanks. In your theme personalization, there is a Custom CSS area. In which one of the below section should I put your custom code ?

– Global Custom CSS
– Custom CSS for Desktop
– Custom CSS for Mobile
– Custom CSS for Tablet
– Custom CSS for Mobile Landscape
– Custom CSS for Mobile

Add the code to the global custom CSS area.

Great thanks. Issue closed.

[Author]

Posts