[Resolved] Masonry: space between posts and load more

[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

[Tom]

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..).

[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

[Tom]

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.

[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.

[Tom]

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

[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**

[Tom]

Ah! Change the CSS to this:

.masonry-post .inside-article {
      margin-right: 30px;
}

.separate-containers .masonry-post {
      margin-bottom: 30px;
}

[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 🙁

[Tom]

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

Thanks!

[Carlos Paramio]

There they go

[Tom]

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?

[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

[Tom]

For the ride sidebar, this should do the trick:

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

[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

[Author]

Posts