Multi Column Mobile

Hi there,

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

Let me know :)

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

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;   
    }
}

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

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

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

I can't replicate on my install.

Can you show me your site possibly?

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

Shouldn't be necessary, just the URL to the front end should help :)

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

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

Awesome, glad you resolved it :)