[Support request] Adding border to articles in masonry

[Alberto]

I need to add a border like I do at http://duitslanddag.sjbdixital.net/ (just added with your great WP Show Posts Pro plugin) at the archive page where I’m using masonry. You can see at http://duitslanddag.sjbdixital.net/nieuws/
How can I do this?

Also, I would like the ‘Meer info’ text to show like the button in the first page, is it possible?

TIA

[Leo]

Hi there,

Looks like you have lots of custom CSS going on which I don’t think it’s necessary?

Can you try removing them first and try the following:

I believe what you wanted is columns (not masonry) layout with space between them? If so you should be able to do that by adding some separating space: https://docs.generatepress.com/article/separating-space/

As for the button color the customizer should work: https://docs.generatepress.com/article/colors-overview/

Let me know 🙂

[Alberto]

Hello Leo.
Thanks but what I’d like is to use the masonry feature, because I want the other post not in pages but loading when the user press the related button.
Can I border the posts using the masonry feature?

And also I’d like to add a ‘More Info’ button as at first page. How can I do that?

Thanks.

[Leo]

Your custom CSS is making it very hard to add a border that looks good: https://s1.postimg.org/1ov3gcq133/border.png

Can you actually try GPP 1.5 beta? The options you want are actually all added in there. Should make things a lot easier: https://generatepress.com/forums/topic/gp-premium-1-5/

[Alberto]

Ok
What if I try with columns and not with masonry?, how can I add the border?, is just added like at first page?

[Leo]

Yup the problem isn’t if you are using columns or masonry. It’s that you are using masonry with max-height: 300px CSS style which is opposite of what masonry does.

If you want to switch to columns and remove the CSS then I can have another look 🙂

[Alberto]

Ok
Thats what happens if I disable masonry and enable columns (3 columns) in the customizer (http://duitslanddag.sjbdixital.net/nieuws/)
It seems not to works in this way…
What if I remove max-height (just do it now)?, is it possible as masonry or as columns?
What I need is to add a border to the posts and to have 3 columns.

Thanks.

[Leo]

Currently it’s set to 3 columns? If so something is definitely not working. Any caching plugins?

This should do for adding border:

.archive .inside-article {
    border: 1px solid #000000;
}

[Alberto]

Hello.
Yeah, currently is set to 3 columns and doesn’t works. That’s the reason why I use masonry.
No cache plugins, and everything seems to be ok in customizer (Blog -> Masonry disable, Columns enable and set to 3, …)
I’m working with WP Show Posts but I think there’s no problem with this. And ‘Nieuws’ is a Custom Post Type.
I don’t know what I am doing wrong…

[Leo]

Wait is that page displayed using WP Show Posts? If so the column number needs to be set within the plugin.

If not do you actually mind trying out the beta? Blog options have been drastically improved in the new version: https://generatepress.com/forums/topic/gp-premium-1-5/

[Alberto]

Hello.
Well, I’m using the plugin because the first page http://duitslanddag.sjbdixital.net/ As you can see there are 3 columns, so it’s set up for 3 columns (watch here: https://prnt.sc/h3faut)
And no, I’m not using the new version. I prefer using an estable version, but if the new one improve working with columns then I could consider it.

[Alberto]

Ok, I think I’ve made progress solving this problem…
I’d just added this filter hook https://docs.generatepress.com/article/using-columns-in-the-blog/ and I get the 3 columns.
Then I set up Separate Space to 20px, no 0 as I want. I’ve had to change a lot of CSS code so that in all the pages the top margin didn’t appear and I did add it to the page ‘Nieuws’ and try to put the border to the posts. It’s not an elegant solution but it seems to work.

Also I upgrade to 1.5 so the page looks as you can see at http://duitslanddag.sjbdixital.net/nieuws/

The problem now is the mobile versions… How can I do to adjust the image width and height automatically?

Regards.

[Leo]

The featured image should be responsive by default. You can see it in action on this page: http://demo.generatepress.com/

Not sure why yours isn’t working. Have you added any CSS for it?

Can you remove your own CSS and list out the things you would like to change so I can provide the best solution possible?

Thanks!

[Alberto]

Hi!
Not CSS but a fixed width and height in Customizer -> Blog -> Featured Images because the images used has no equal widths and heights so I forced them to looks like you can see.
I want to fit them but with the same width and height (as a hard crop was made).

Regards.

[Leo]

What if you just fixed the height? The width should be automatically determined by the container itself so they should be the same already.

[Author]

Posts