Two issues on two sites

[DaveNParticipant]

Hi Ernest,

I’m afraid I have two issues at the moment.

I recently changed to isotopic on our main site, southeastasiabackpacker.com.
It looks fantastic on desktop, but on mobile, it is showing in 4 columns, meaning the pictures are tiny and the titles are being squashed into a few characters and very long.

Even more strangely, RPP has completely stopped displaying on our second site southamericabackpacker.com. I haven’t changed anything in the settings. Before it was working fine, but now nothing appears at all. If I set “show above content” or “show below content”, then a grey box appears with Related Posts written in it, but no actual posts.

By the way, we have also purchased ajax search for the main site, which we are very impressed by. I’m sure we’ll be adding it to the second site soon too!

[Ernest MarcinkoKeymaster]

Hi,

For the first site, try this custom CSS, it will add more responsiveness:

@media only screen and (max-width: 720px) {
    .rpp_item {
        width: 33% !important;
    }
}
@media only screen and (max-width: 520px) {
    .rpp_item {
        width: 50% !important;
    }
}
@media only screen and (max-width: 360px) {
    .rpp_item {
        width: 100% !important;
    }
}

On the second site, on the Advanced Options panel, on ‘the exclude posts by ids’ option, there was an extra comma after the end of the list, which caused the problem. I have removed it, now it should be fine.

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

[DaveNParticipant]

Hi Ernest,

Thank you very much! Quite embarrassing that an extra comma had caused that problem. I can’t imagine how I could have done that!

The CSS on the main site has certainly done the trick, though I have changed the code to 50% instead of 100% on mobile as the images were coming out blurry (I was very proud for having worked that out).

Unfortunately, there is one more complication, which is that on product pages, I am still using the slick and slide format. Now those images look v strange on mobile. See example here
https://southeastasiabackpacker.com/bookings/liveaboard-komodo/

Is there anything I can add to the code so that it only applies on the isotopic instance?

Thanks for your help!

[Ernest MarcinkoKeymaster]

Hi!

Quite embarrassing that an extra comma had caused that problem. I can’t imagine how I could have done that!
That is rather the plugins fault, it should count for such errors, it could happen to anyone.

I have made a change to the code, so it wouldn’t affect the other layouts. Please remove the other one, and use this instead:

@media only screen and (max-width: 720px) {
    #relatedpostspro_0_1 .rpp_item {
        width: 33% !important;
    }
}
@media only screen and (max-width: 520px) {
    #relatedpostspro_0_1 .rpp_item {
        width: 50% !important;
    }
}
@media only screen and (max-width: 360px) {
    #relatedpostspro_0_1 .rpp_item {
        width: 100% !important;
    }
}

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

[DaveNParticipant]

Thanks Ernest!

That’s done it!

[Author]

Posts