Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

Home Forums Support Multi Column Mobile

  • This topic has 12 replies, 3 voices, and was last updated 5 years ago by Tom.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #242549
    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

    #242661
    Tom
    Lead Developer
    Lead Developer

    Hi there,

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

    Let me know 🙂

    #243035
    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

    #243084
    Tom
    Lead Developer
    Lead Developer

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

    #243415
    Tom
    Lead Developer
    Lead Developer

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

    #243578
    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

    #243632
    Tom
    Lead Developer
    Lead Developer

    I can’t replicate on my install.

    Can you show me your site possibly?

    #243687
    Giacomo

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

    #243704
    Tom
    Lead Developer
    Lead Developer

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

    #243722
    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

    #243800
    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

    #243823
    Tom
    Lead Developer
    Lead Developer

    Awesome, glad you resolved it 🙂

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.