Archived topic
GeneratePress Blog Masonry Issues
6 replies · Started by Paul on May 29, 2021
When looking at my blog page on GeneratePress Premium in Safari on my 7th Gen iPad, I am seeing many issues.
Simply scroll down the page a little and then rotate it and you will see that posts are now scrunched together.
But scrolling down fixes it. And you will also see that sometimes it goes from 3 rows down to 2 on landscape, which looks very weird.
I have attached a video of the issue below...
https://1drv.ms/v/s!AtzxGqXDzsbBioRiQjk5LzVEJQCl8g?e=sfJHXk
I am developing my site using Generatepress in my staging site on siteground.
The URL to the blog is, however, this also happens to search pages also...
https://www.staging8.dailycdev.com/blog/
I am using GeneratePress 3.0.3.
I am hoping you have a fix for this soon.
Thanks.
-Paul
Hi Paul,
Sorry for the delay here.
I took a look on my iPad using Safari and couldn't reproduce the issue. What version of Safari are you testing with?
Let me know and I'll look further.
Thanks!
I am using the latest version of Chrome when doing my testing on the iPad.
Ah, I'm seeing that with Chrome as well.
Strange - what happens if you comment out your custom width CSS? Same issue?
I've removed the following masonry column breakpoints and of course, the columns are now only 2 when I go from landscape to portrait on the iPad, so the testing doesn't work. Anyhow, what I want to achieve is the following and if my CSS is wrong, please help me do it correctly so that the masonry works good on iPads...
@media (min-width: 650px)
.generate-columns.tablet-grid-50, .grid-sizer.tablet-grid-50 {
width: 50%;
}
@media (min-width: 992px)
.generate-columns.tablet-grid-50, .grid-sizer.tablet-grid-50 {
width: 33.33%;
}
@media (min-width: 1266px)
.generate-columns.tablet-grid-50, .grid-sizer.tablet-grid-50 {
width: 25%;
}
@media (min-width: 1447px)
.generate-columns.tablet-grid-50, .grid-sizer.tablet-grid-50 {
width: 20%;
}
Thanks.
-Paul Gee
I fixed the masonry issues with the following code...
@media (min-width: 650px) {
.mobile-grid-100 {
clear: none;
width: 50%!important;
float: left;
}
}
@media (min-width: 992px) {
.mobile-grid-100 {
width: 33.33%!important;
}
}
@media (min-width: 1266px) {
.mobile-grid-100 {
width: 25%!important;
}
}
@media (min-width: 1447px) {
.mobile-grid-100 {
width: 20%!important;
}
}
So setting it to float: left ended up fixing the issue in Chrome?
