Hi, the third column of my Post Grid is dropping to the next line on Chrome. It displays as it should on Safari.
Hi, I can see the column number is not properly working when there are four items! You can follow my instruction to fix this issue by writing custom CSS. Let me clarify this is a temporary solution. We're going to release our block version of post-grid within a month.
First, go to the All Post Grid option and grab the ID number of the grid that you want to apply CSS code. Then go to Edit
Screenshot: https://i.imgur.com/Ja2hJZc.png
When you're editing the grid, go to the Custom Scripts option and copy the CSS code below and paste it there. Important: you've to replace the grid number with your actual post grid ID. Also, under grid-template columns, replace the number value with the number of columns you want. You've to edit for all device types mobile, tablet and desktop. Kindly check the screenshot. I highlighted the area for you that needs to modify.
Screenshot: https://i.imgur.com/b1h8ML8.png
#Extra: If you want to apply the CSS with multiple post grids, just duplicate the CSS selector with a comma.
Screenshot: https://i.imgur.com/LXDMydH.png
Let us know if it helps.
Regards.
/* for mobile */
@media only screen and ( min-width: 0px ) and ( max-width: 767px ){
#post-grid-16 .grid-items{
display: grid !important;
grid-template-columns: repeat(1, 1fr) !important;
gap: 0px !important;
}
}
/* for tablet */
@media only screen and ( min-width: 768px ) and ( max-width: 1023px ){
#post-grid-16 .grid-items{
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important;
}
}
/* for desktop */
@media only screen and (min-width: 1024px ){
#post-grid-16 .grid-items{
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 30px !important;
}
}
That worked, fantastic thanks!
I think you can fix this issue by setting a percentage value to the grid column width.
You can access this option by editing a post grid and under Grid settings, there is a field called Grid item width. just give it a percentage value. for example for 3 columns you can use 28%
Kindly check the screenshots
One: https://i.imgur.com/qvBPynB.png
Two: https://i.imgur.com/QbyinbU.png
Let us know if it fixes the issue for you.
Regards.
Any ideas on this? Hoping to get this resolved and sent over to my client – I’m confused by how one of my 3 column grids works fine in Chrome but the other doesn’t:
http://thismustbetheplaceebbsfleet.org/get-involved/ is working in Chrome
http://thismustbetheplaceebbsfleet.org/programme/ is not in Chrome
Thanks,
Nick
Thanks – it does help to a degree in that if I set it to 30% all 3 columns are on the right line, however the grid is no longer centred so it looks messy. My client wants there to be 45px margin left and right of the grid so I am going to have to work out how to use the percentage value whilst taking that into account.
I was wondering though, how come the other Grids I’ve used in the site are displaying ok in Chrome? There is a 4 column grid here:
http://thismustbetheplaceebbsfleet.org/news/
and actually another 3 column grid here:
http://thismustbetheplaceebbsfleet.org/get-involved/
Both of which are working fine?
Thanks again for your help!
Welcome to PickPlugins.
Could you please share the site URL?
Hi, sorry for the short question, I actually hit enter by mistake before finishing typing it 😅 The URL is http://thismustbetheplaceebbsfleet.org/programme/, on Safari the grid displays as it should, but on Chrome the third column is dropping to the next line. Thanks for your help!
Glad to know that it fixes the issue for you.
Would you mind giving us your rating? It’ll inspire us a lot, thank you.
You can post your review and rating here:
https://wordpress.org/support/plugin/post-grid/reviews
Regards.