[Resolved] Masonry: space between posts and load more

Home Forums Support Masonry: space between posts and load more

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #84339
    Carlos Paramio

    Tom,
    Is there any way to:
    – change the space between posts (witouth touching Element Spacing setting)? padding?
    – customize how many posts load at first load (4 at the moment)

    Thanks

    #84360
    Tom
    Lead Developer
    Lead Developer

    The “Separating Space” setting in Element Spacing adjusts the spacing between posts in Masonry.

    Posts per page is set in “Settings > Reading” (Blog pages show at most..).

    #84400
    Carlos Paramio

    Posts per page is set in “Settings > Reading” (Blog pages show at most..).

    My bad, I thought it was GP-related

    The “Separating Space” setting in Element Spacing adjusts the spacing between posts in Masonry.

    Yeah I know, but it also changes space between everything else.
    My boss wants “more air” between excerpts in masonry, the rest is fine
    Will some padding do the effect? or is there a better way?

    Thank you Tom

    #84556
    Tom
    Lead Developer
    Lead Developer

    Gotcha.. Let’s try this:

    .masonry-post .inside-article {
          margin-right: 30px;
    }
    
    .separate-containers .masonry-brick {
          margin-bottom: 30px;
    }

    You should be able to adjust those as you like.

    #84575
    Carlos Paramio

    Hi Tom,
    CSS works fine, but it creates a huge empty space between site header and first post (I think it adds the margin I’m setting here plus the space set in Element Spacing)

    I’ve tried giving the first post a margin-top: -40px; (e.g.) and that removed the empty space, but when breadcrums appear, the top of the post and breadcrums overlap.

    #85154
    Tom
    Lead Developer
    Lead Developer

    Can I see the site minus the -40px margin?

    #85348
    Carlos Paramio

    Of course!
    http://www.unedtalavera.es

    As it is not published yet, you must log into the temporary (free) hosting company:
    **login info removed**

    #85488
    Tom
    Lead Developer
    Lead Developer

    Ah! Change the CSS to this:

    .masonry-post .inside-article {
          margin-right: 30px;
    }
    
    .separate-containers .masonry-post {
          margin-bottom: 30px;
    }
    #85602
    Carlos Paramio

    Mr. Usborne, thank you very much, I really appreciate your help.

    Could you complete the trick?
    If I do a search with this CSS activated, the brick containing the word(s) sought after is a bit bigger than the rest of the masonry posts. It fills all the space, ignoring the new margin that is set at the right.
    The same behavoir happens when you open a normal page of the site (not a post)

    I’m sorry I don’t have the skills nowadays to identify those items in the PHP files to add them to the CSS by myself 🙁

    #85797
    Tom
    Lead Developer
    Lead Developer

    Hmm, I’ve lost your secure username and password. Can you email them to me at support@generatepress.com?

    Thanks!

    #85802
    Carlos Paramio

    There they go

    #85806
    Tom
    Lead Developer
    Lead Developer

    Updated CSS:

    .masonry-post .inside-article,
    .separate-containers .page-header {
          margin-right: 30px;
    }
    
    .separate-containers .masonry-post,
    .separate-containers .page-header {
          margin-bottom: 30px;
    }

    As for the page – if you want the same separating space on pages, why not just use the Element Spacing separating space setting? It does all of the above for you, plus the spacing for pages?

    On the page, are you just wanting the space to be larger to the right of the content area?

    #85875
    Carlos Paramio

    Thanks, with that new CSS search container gets exactly the same width as masonry posts.

    I can’t use Element Spacing for this purpose, as my boss wants to see more space between masonry excerpts and right sidebar and among masonry excerpts themselves.

    So, after adding this CSS I get the desired behavoir, but when you open a page, for example from an item of the main menu, this page is closer to right sidebar than masonry posts are.

    Therefore, I need to add everypage to that CSS (tried with .page with weird results)

    I hope I’ve made myself clear, this is being a tough week

    #86001
    Tom
    Lead Developer
    Lead Developer

    For the ride sidebar, this should do the trick:

    .page.right-sidebar.separate-containers .site-main {
        margin: 30px 30px 30px 0;
        padding: 0;
    }
    #86073
    Carlos Paramio

    Ok, right now I have this CSS:

    /* increase space between elements in desktop view only */
    @media screen and (min-width: 769px) {
            /* horizontal space between masonry view and right sidebar */
    	.masonry-post .inside-article,
    	.separate-containers .page-header {
    	      margin-right: 40px;
    	}
    
    	/* horizontal space between normal pages  and right sidebar */
    	.page.right-sidebar.separate-containers .site-main {
        	margin: 20px 40px 20px 0;
    	}
    
    	/* vertical space between masonry excerpts */
    	.separate-containers .masonry-post {
        	  margin-bottom: 40px;
    	}
    }

    There’s still one case that needs to see the horizontal space increased: between single post and right sidebar.

    We’re almost done!
    Thank you Tom

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