Multi Column Mobile

[Dushan]

Hi,

single column-homepage-layout on Retina-iPads feels quite dated. Even modern smartphones could handle more than one column on overview-pages.

Is there any way to add another »breakpoint« between »large« and »mini«? The blog shouldn’t go into »list mode« on iPads in portrait mode…

Thanks
Dushan

[Tom]

Hi there,

Are we talking about masonry or just columns? I agree, some improvement could be done here.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Giacomo]

Hi Thomas,
I urgently need to change the mobile breakpoint to 500px on the my website in order to use multi-columns masonry with portrait ipad layout o iphone 7 plus landscape layout.
Could you please propose a solution for this.
Thank you in advance for your advice.
Best regards,
Giacomo

[Tom]

You could try something like this:

@media (max-width: 768px) and (min-width: 500px) {
    .masonry .grid-sizer, 
    .masonry .masonry-post, 
    .masonry .masonry-post.width4, 
    .masonry .grid-sizer.width4, 
    .masonry .masonry-post.width6, 
    .masonry .grid-sizer.width6, 
    .masonry .masonry-post.medium, 
    .masonry .grid-sizer.medium {
    	width: 50% !important;
    }
    body:not(.no-sidebar) .masonry-post .inside-article, 
    body:not(.no-sidebar) .masonry-enabled .page-header {
     	margin: 0 10px;   
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Giacomo]

Hi Thomas, thank you for your answer.

With your advice I succeeded in creating multi-column masonry on the mobile layout of my website.

Unfortunately, as you can see in this attached picture:
https://www.dropbox.com/s/ivapqo8ft1ivs4e/bug%20masonry.png?dl=0
I found a bug on the positioning of the posts inside the masonry.
Could you please help me to solve the problem?

Best regards,
Giacomo

[Tom]

Strange, are you using the latest version of GP Premium?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Giacomo]

Yes, I am using the latest version of your plugin.
I tried to disable the other plugins and all the hooks but the problem persists.
In the css style the top position of the post is correct but in effect the post is positioned below creating the blank space you can see in the picture I sent to you.
The problem occurs only in the left column of the masonry (and in the central if I use three columns), never in the right column.
Could you please try to reproduce the problem on your server?
Best regards,
Giacomo

[Tom]

I can’t replicate on my install.

Can you show me your site possibly?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Giacomo]

Yes, do you need an admin account?
Please let me know.
BR,
Giacomo

[Tom]

Shouldn’t be necessary, just the URL to the front end should help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Giacomo]

Hi Thomas,
My url is http://www.varieedeventuali.com
Because the desktop layout (>768px) works well, if it is not possible to solve the problem, I thought it could be a solution to move the mobile breakpoint to 500px. Under this thresold I will use only one column layout so it could be not necessary to fix the problem.
Thanks in advance for your help!
BR,
Giacomo

[Giacomo]

Hi Thomas,
checking my css file, I found a portion of the code that caused the problem I told you.
Thank you for your support and have a good weekend.
BR,
Giacomo

[Tom]

Awesome, glad you resolved it 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts