How to make GD Popular Post View Responsive

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

Tagged: responsive

Author

Posts
January 3, 2017 at 10:33 pm #336067

wonderbc
Expired Member

Post count: 70

HI, I’m using GD Popular Post view with Supreme theme. I have 5 listings in a row. Issue is that on mobile phone, they are still displayed on one row, which makes them unreadible. Do you know how only one listing can appear per row? This doesn’t matter whether I add it as a widget or shortcode. I’ve also seen that the Kleo theme is able to do this, so I know it’s possible, just not sure if it is a limitation of the Supreme theme, or something that I’m missing.

you can view this at http://www.saltspringpages.com

Thanks!

January 4, 2017 at 1:42 am #336122

Guust
Moderator

Post count: 29970

This seems to be specific to your site, the demo does not have that same issue: https://wpgeo.directory/supreme-directory/

It might have to do with how you added those widgets there, it seems you used Visual Composer.
Please post your admin details in a private reply if we need to have a further check for you.

January 4, 2017 at 3:52 am #336195

wonderbc
Expired Member

Post count: 70

This reply has been marked as private.

January 4, 2017 at 6:53 am #336228

Guust
Moderator

Post count: 29970

You had added some CSS at GD > design > scripts that overwrote the normal Supreme CSS.
I commented it out but left it.

Please check now.

January 4, 2017 at 8:39 pm #336831

wonderbc
Expired Member

Post count: 70

thanks for trying, but I don’t see that this fixed the mobile issue. that code was added by you to fix the issue that only 4 listings were showing up when five were selected.

now it is back to where it was before on desktop, 4 listings showing on one row, and the fifth by itself on the next row.

on mobile, the listings appear the same as on desktop, which makes them unreadable.

were they showing up differently for you?

January 4, 2017 at 11:52 pm #336932

Guust
Moderator

Post count: 29970

It all works correct on the Listings pages, like http://www.saltspringpages.com/salt-spring-island/food-and-drink/restaurants/
So there must be something added to the homepage, because of VC. I haven’t found it yet (I never use VC).

I know it is VC because not using VC renders the grid correctly: http://www.saltspringpages.com/guust
http://www.saltspringpages.com/salt-spring-island/

I’ll get Giri to have a look for you.

January 5, 2017 at 9:37 am #337119
Giri
Expired Member

Post count: 3155
Try this CSS and let me know how that goes.
```
@media (max-width: 668px) {
.sd .geodir_category_list_view li.gridview_onethird, .sd .geodir_category_list_view li.gridview_onefourth, .sd .geodir_category_list_view li.gridview_onefifth {
    width: 100% !important;
}
}
```
January 5, 2017 at 8:35 pm #337576

wonderbc
Expired Member

Post count: 70

HI Giri,

Yes it worked on mobile! Looks great.

However, since Guust commented out the code (in GD, Design, Script), the desktop issues is back again.

/*.sd .geodir_category_list_view li.gridview_onefifth {
margin: 0 12px 0 0;
width: calc(20% – 15px) !important;
}*/

Support had suggested this to fix the issue that on desktop, only 4 posts in a row on a 5 column layout, and puts the 5th on a new row.

When i took off the commenting, the mobile page didn’t load. When I put it back on (deactivated) the mobile site works, but the old problem remains.

What do I suggest to fix both issues?

Thanks so much. I’m getting ready to launch, and these are some of the last few issues.

PS…I added the code under Customize, Additional CSS. Wasn’t sure whether I should have added it to the GD Design, Script area.

January 6, 2017 at 12:36 pm #337910

Giri
Expired Member

Post count: 3155

Hi wonderbc,

I’m unable to access your site.

But you seems like you have the same problem this user had.

Try this css.

https://wpgeodirectory.com/support/topic/grid-view-problems/#post-335218

You can use the css either in customize or gd scripts.

Thanks

January 6, 2017 at 6:00 pm #338167

wonderbc
Expired Member

Post count: 70

This reply has been marked as private.

January 6, 2017 at 11:11 pm #338267

Paolo
Site Admin

Post count: 31206

Hi,

that username and password are not working. Please double check them before sending them again.

Thanks

January 7, 2017 at 12:24 am #338294

wonderbc
Expired Member

Post count: 70

This reply has been marked as private.

January 9, 2017 at 8:55 am #339415

Giri
Expired Member

Post count: 3155

Hi wonderbc,

I do see everything get displayed in a single row.

https://www.dropbox.com/s/jbhzxhhrp5b5sez/Screenshot%202017-01-09%2014.24.45.png?dl=0

Am i missing something?

Perhaps you have not cleared your browser cache?

January 9, 2017 at 7:51 pm #339720

wonderbc
Expired Member

Post count: 70

HI Giri,

No idea how you were able to achieve this.

I’ve cleared the browser cache now on three browsers (Mac Safari 9.12, Firefox 50.1 and Chrome Version 55.0.2883.95 (64-bit)) and I still get the same on Safari (see screen shot) and on the other two browsers, now the page below the featured image is not loading at all- stays white. This has never happened before (see screen shot). In firefox and chrome, and front page map (above footer) doesn’t load either and just keeps spinning.

I’ve turned off any ad blockers and other extensions on my browsers.

I’ve tried on cross browser testing platforms turbo.net to see what it looks like in Windows and it is the same as on my Safari (4+1).

I’ll have to try and sort out why the page body doesn’t show in my other browsers at all.

Thank you for you your assistance with this.

January 10, 2017 at 9:18 am #340177

Giri
Expired Member

Post count: 3155

Hi I tested in my browser. Its chrome on a Mac.

This is the screenshot.

https://www.dropbox.com/s/kgl4l17hgwsxczo/Screenshot%202017-01-10%2014.44.22.png?dl=0

Let me test in some other browser and get back to you with a fix.

Thanks
Author

Posts