Hi @cmnthrds,
I happened to read this by chance from my phone. It’s a bit late over here now, I’ll lend you guys a hand sometime tomorrow.
I also use the plug in on my side bar with different settings, and I think we’re running into issues with two different uses of the plug in.
The plugin is very flexible, I can tell you that much. You can have two (or more) Popular Posts widgets each with its own design/structure. What your developer said is simply not true.
I’ll need some more details in order to help you out but let’s discuss that tomorrow.
Hey @cmnthrds,
You mentioned that you guys were using the WPP widget. However, from the source code of your homepage it seems you’re using a Page Builder. Is that correct?
Yes. We’re using a page building with the widget. I have a developer who I’m working with and I’m not 100% sure how it all works.
We got the plug in to appear as a grid and it’s almost as we want it.
It’s not responding on mobile appropriately. It turns into one column, but it’s way off center and off the screen on the right.
On desktop, I’d like a bit more room in between all the images, as well.
Yes. We’re using a page building with the widget.
That’s what I thought. Which one are you using? I could try installing it on my development site and see how it works.
Could you please share a screenshot of the settings you’re using on the homepage?
It’s not responding on mobile appropriately. It turns into one column, but it’s way off center and off the screen on the right.
On desktop, I’d like a bit more room in between all the images, as well.
These are all styling issues. Your developer should look into this.
Alternatively, if you’re up for it and don’t feel like waiting, I’m available for freelance work.
Seeing how Beaver Builder renders the WPP widget settings form hurts my feelings a little…
Anyways, you can have that WPP widget use almost the exact same structure as your Recent Posts grid. To do so:
- Under HTML Markup Settings, set Before/after Popular Posts to
<div> and </div> respectively.
- Set Post HTML Markup to:
<article class="simple-grid one-third post type-post status-publish format-standard has-post-thumbnail entry">
<a href="{url}" title="{text_title}" class="alignnone">
{thumb_img}
</a>
<header class="entry-header">
<h2 class="entry-title">
<a href="{url}">{text_title}</a>
</h2>
</header>
</article>
- Click on Save to apply changes.
With this, the popular posts grid is almost ready. You/your developer will still need to make some tweaks to the CSS rules for the grid to look and behave exactly like your Recent Posts list (eg. target the first element on each row via CSS rules since we can’t assign the odd class to it, at least not without using some PHP).
You may need to adjust the CSS classes assigned to the article element as well.
Almost got it! The mobile display is much better.
It made it a 3×2 grid not a 2×3 grid. I assume that’s some work with CSS?
Yep! Just got your e-mail though, let’s move the conversation over there 🙂
