Store Listing Below Map Vertical (Preferred Horizontal Layout) Fix

I don’t see a scrollbar at the moment at your page, so hard to say how to fix it.

If you want to modify the height of the list, then you can do so with this CSS code.

#wpsl-stores { height: 250px !important }

Hello Tijmen,

Sorry about that, we had the #wpsl-result-list {
display: none !important;
}

To temporarily hide the list until we were able to achieve our desired result. I went ahead and left the issue live on the site for you to see it. The result list is stacked vertically and I was hoping to make it horizonal instead, (as that takes up less space / and you can still see the map while you’re looking through the store list).

https://ionaz.com/locations/

I applied your code #wpsl-stores { height: 250px !important } and I did not see any changes to the format; vertical, horizontal or otherwise. I have left that custom CSS inserted into our website as well.

So basically a horizonal scrollbar instead of a vertical one.

Probably yes, but this may require more then just a few lines of custom CSS rules to make it work.

Maybe combining both is an acceptable alternative? So you get x locations next to each other horizontally before it continues on the next row?

You can see what I mean by using this code. You can just adjust the width / height to whatever value you want, and maybe also use a % instead of a px width.

#wpsl-wrap.wpsl-store-below #wpsl-result-list li {
    padding: 10px 10px 10px 0;
    width: 205px;
    float: left;
    height: 255px;
}

Hey Tijmen,

I messed around with the code and I appreciate your help. Although that comes sort of close to what I’d like, I think aesthetically the side menu is probably best. I tweaked your previous CSS to reduce the width of the result list with this:
#wpsl-stores { width: 320px !important }

The menu is the right size now but there is empty white space where the rest of the result list used to be. Trying to be self-sufficient I’ve tried these different codes to fill it:
#wpsl-result-list {
width: 320px !important;
}

and

#wpsl-stores .wpsl-result-list * { width: 320px !important }

and

#wpsl-gmap {
width: auto !important;

I have no clue what I’m doing.