Gap between articles (Masonry (grid style)


#1

Hello support team,

Same articles have a ‘bigger gap’ than others…

How can I set the space ‘between’ the articles on the masonry grid equal?

http://136.144.175.123/~voorbeeld/category/blog-2/

Thanx,

Tjeerd


#2

Hello Tjeerd,

How did you enable sidebar on masonry blog?

Kind Regards, Roman.


#3

Kharis Helpt me :slight_smile:

    kharisblank 
  April 29  

Hello there,

Try editing the archive.php and home.php files with a child theme. In those files, replace this code block (near bottom line):

<?php 
	if ( get_theme_mod('blog_layout','classic') == 'classic' ) :
		get_sidebar();
	endif;
?>

with:

<?php
	if ( get_theme_mod('blog_layout','classic') == 'classic' || get_theme_mod('blog_layout','classic') == 'masonry-layout' ) :
		get_sidebar();
	endif;
?>

Then add this CSS code to Appearance > Customize > Additional CSS from dashboard.

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #primary.masonry-layout{
    width: calc(100% - 283px) !important;
    width: -webkit-calc(100% - 283px) !important;
    width: -moz-calc(100% - 283px) !important;
  }
  #secondary.widget-area {
    width: 283px;
  }
}

@media only screen and (min-width: 1200px) {
  #primary.masonry-layout{
    width: calc(100% - 350px) !important;
    width: -webkit-calc(100% - 350px) !important;
    width: -moz-calc(100% - 350px) !important;
  }
  #secondary.widget-area {
    width: 350px;
  }  
}

Regards,
Kharis


#4

Hello Tjeerd, thank you for explanation.

That might be causing your issue. You can try to temporarily disable that code in order to revert to default masonry blog without sidebar, and see if it helps.

Kind Regards, Roman.


#5

Good afternoon Roman,

I tested it (without the custom sidebar code). But even then, there is a difference in spacing … Can that be solved with an additional CSS code?

Thanx

Tjeerd


#6

Hello Tjeerd,

I couldn’t recreate this issue on my local Perth Pro install. Please try to temporarily deactivate all your plugins except Toolset Types and Page Builder by SiteOrigin, and see if it helps.

Kind Regards, Roman.


#7

Thanx Roman,

The lazy load plugin caused the problem. Resolved :slight_smile: Thanks for your help.

Tjeerd


#8

You are welcome Tjeerd! :slight_smile:

Please feel free to ask any other questions that you might have in future.

Kind Regards, Roman.


#9