Change the scroll direction in the horizontal layout

[hotelierParticipant]

Hello, i wonder if it’s possible to change the scrolling for the horizontal results layout (or to edit the vertical layout), id like scroll it down rather than on the side. The vertical layout is fine but i’d love to have more (and bigger) thumbnails per row, rather than one small per row, basically id like to have an horizontal layout with the vertical layout behavior 🙂 hope you can help, thanks

[Ernest MarcinkoKeymaster]

Hi!

Well, after some experimenting I might have found a possible solution, where you won’t need to change anything in the plugin files.

Simply use this custom CSS and the vertical layout:

.asp_image {
    width: 100% !important;
    height: 200px !important;
}

It will force 100% width for the image with a 200px height (of course you can change that). This resulted in something like: https://i.imgur.com/b7MHvGd.png

I hope it helps!

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[hotelierParticipant]

Hello Ernest, thanks for your help, I tried but it just put the items one per row, id like something like the attached image here http://imgur.com/a/qmZnn , same as the horizontal view but with the scroll down rather than horizontal, basically having 4 items per row not 1. Hope you can help, thanks

[Ernest MarcinkoKeymaster]

Oh, I see now. Well, that’s a bit more difficult, but I would say possible. Although please note that this is a modification “hack”, so I cannot guarantee that these suggestions will work correctly at any circumstances.

Same as before, use the vertical view, but with this custom CSS:

.results .item {
    width: 24% !important;
    max-width: 24% !important;
    box-sizing: border-box !important;
    margin: 0.5% !important;
    flex: 0 0 25%;
    -webkit-flex: 0 0 25%;
    padding: 10px 4px !important;
}

.resdrg { 
    display: flex;
    flex-wrap: wrap;
}

.results .asp_spacer {
    display: none !important;
}

.results {
    max-height: 300px;
}

.asp_image {
    width: 100% !important;
    height: 200px !important;
}

This code resulted this layout: https://i.imgur.com/2mYcAqQ.png

It’s probably not 100% correct, but it should be a good starting point.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[hotelierParticipant]

Amazing, thanks, i used your code as starting point and now it’s great, thanks a lot for your support

[Ernest MarcinkoKeymaster]

You cannot access this content. Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts