Docs

[davidferp]

Hi X-team,

Another question, this time regarding the separation of blog posts in masonry view.

In my blog the posts in masonry view appear with irregular padding. I attach two screenshots to illustrate what I mean. In the first one, the vertical separation of is the one I would like for all posts in this view. In the second image, the separation is higher and I fail to find the reason.

Would it be possible to show a regular tiling of posts in this setup, this is, with regular separation?

Thanks a lot guys!

[davidferp]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! I can confirm the spacing of the grid boxes. Could you please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($){
  $(window).load(function() {
    $container.isotope({  });
  });
})(jQuery);

Hope this helps.

[davidferp]

Thanks a lot Rue Nel for the proposed code.

Unfortunately when I use this custom Javascript snippet the blog page does not load…

Any more thoughts?

Thanks again for your help!

[Lely]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[davidferp]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for providing the information. I have tried everything I can but still the spaces is there. It will only disappear as soon as you resize your window. Please do this approach:

Since you have your child theme active and ready, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/GLOBAL/_SCRIPT-ISOTOPE-INDEX.PHP
// -----------------------------------------------------------------------------
// Isotope script call for index output.
// =============================================================================

$is_rtl = is_rtl();

?>

<script>

  jQuery(document).ready(function($) {

    <?php if ( $is_rtl ) : ?>

      $.Isotope.prototype._positionAbs = function( x, y ) {
        return { right: x, top: y };
      };

    <?php endif; ?>

    var $container = $('#x-iso-container');

    $container.before('<span id="x-isotope-loading"><span>');

    $(window).load(function() {
      $container.isotope({
        itemSelector   : '.x-iso-container > .hentry',
        resizable      : true,
        filter         : '*',
        <?php if ( $is_rtl ) : ?>
          transformsEnabled : false,
        <?php endif; ?>
        containerStyle : {
          overflow : 'hidden',
          position : 'relative'
        }
      });
      $('#x-isotope-loading').stop(true,true).fadeOut(300);
      $('#x-iso-container > .hentry').each(function(i) {
        $(this).delay(i * 150).animate({'opacity' : 1}, 500);
      });

      $container.on( 'layoutComplete', function( event, laidOutItems ) {
        $(window).resize();
      });
    });

    $(window).smartresize(function() {
      $container.isotope({  });
    });

  });

</script>

3] Save the file named as _script-isotope-index.php
4] Upload this file to your server in the child theme’s folder
wp-content/themes/x-child/framework/views/global/

Hope this helps. Please let us know how it goes.

[davidferp]

Hello there,

Thank you very much guys for all the effort…

I followed your instructions but sadly the problem still persists… Out of desperation, I deleted all my custom CSS and the the problem disappeared. Therefore the irregular separation between blog posts in masonry view is caused by conflicting custom CSS. However I don’t have a clue which one… I might have to sequentially disable every customization until I find the culprit.

Any advice on where to focus is much appreciated

Thanks a lot again

[Rupok]

Hi there,

Thanks for updating. As it’s related with your custom CSS, you can place the CSS there or post here (don’t forget to wrap with code tag from toolbar) so that we can try to investigate the code if we can find the culprit.

Cheers!

[davidferp]

Hello there,

That would be wonderful. All help is welcome!

Here the code:

/*============================================================================*/
/* TYPOGRAPHY */
/*============================================================================*/
/* Typographic styles */
h1, .h1 {
margin-top: 0px;
margin-bottom: 0px;
}
h2, .h2 {
margin-top: 0px;
margin-bottom: 0px;
}
h3, .h3 {
margin-top: 0px;
margin-bottom: 0px;
}
h4, .h4 {
margin-top: 0px;
margin-bottom: 0px;
}
h5, .h5 {
margin-top: 0px;
margin-bottom: 0px;
}
h6, .h6 {
margin-top: 0px;
margin-bottom: 0px;
}
.text-white h2,
.text-white h2 a,
.text-white h2 a:hover,
.text-white p,
.text-white .x-btn {
color: #fff;
}
.text-white .x-btn {
border-color: #fff;
}
.text-white h2 a:hover,
.text-white .x-btn:hover {
opacity: 0.75;
}
/*============================================================================*/
/* SITE GLOBAL */
/*============================================================================*/
/*Remove flat button text shadow*/ 
.x-btn.x-btn-flat, .x-btn.x-btn-flat:hover {
text-shadow: none;
}
/*Disable element highlighting when in focus*/
a:focus, 
select:focus, 
input[type="file"]:focus, 
input[type="radio"]:focus, 
input[type="submit"]:focus, 
input[type="checkbox"]:focus,
.x-slider-scroll-bottom:focus {
outline: 0;
}
/*--------- NAVBAR ------------*/
/*Control color and transparency of navigation bar*/
.x-navbar {
background-color: rgba(221, 219, 220, 0.6 ) !important;
}
/*Control color and transparency of logo bar*/
.x-logobar {
background-color: rgba(255,255,255, 0.75) !important;  
}
/*Control color of burget icon in mobile*/
.x-btn-navbar{
color: rgba(73,168,150,1) !important;
background-color: rgba(54,48,48,1) !important;
}
/*Do not show ICON menu entry in mobile*/
.mobile .menu-item-7589 {
display: none !important;
}
/*Large - Laptop/Desktop*/
@media (min-width: 980px) {
/*Hide logo bar*/
.x-brand{
display:none;
}
/*Add logo in menu*/
/*Customizer > Custom > Header > inline*/ 
.x-navbar .desktop .x-nav > li.logo-menu-item > a {
text-indent: -99999px;
text-align: center;
width: 180px;
height: 120px;
margin-top:5px;
margin-bottom:5px;
background:  url(http://2c1bl.wpstagecoach.com/wp-content/uploads/2016/06/TwoCamerasAndaBucketList_logo.png) no-repeat center center;
background-size: contain;
}
.masthead-inline .desktop .x-nav {
display: block;
float: none;
text-align: center;
}
.x-navbar .desktop .x-nav>li {
float: none;
display: inline-block;
} 
/*Title bar animation*/
.x-navbar-minimalist {
height: 70px !important;
-moz-transition: height 0.1s ease;
-webkit-transition: height 0.1s ease;
-o-transition: height 0.1s ease;
transition: height 0.1s ease;
}
.x-navbar.x-navbar-minimalist .desktop .x-nav > li > a {
padding-top: 23px;
-moz-transition: padding 0.1s ease;
-webkit-transition: padding 0.1s ease;
-o-transition: padding 0.1s ease;
transition: padding 0.1s ease;
}
.x-navbar.x-navbar-minimalist .desktop .x-nav > li.logo-menu-item > a {
background: url(http://2c1bl.wpstagecoach.com/wp-content/uploads/2016/09/TwoCamerasandaBucketList2_final_color5_compact2_afterScroll.png) no-repeat center center;
-moz-transition: background 0.1s ease;
-webkit-transition: background 0.1s ease;
-o-transition: background 0.1s ease;
transition: background 0.1s ease;
background-size: 70px auto;
height: 60px;
width: 150px;
}
}
/*Medium - Tablet (Landscape)*/
@media (min-width: 768px) and (max-width: 979px) {
/*Home slider right to the top and under the navbar*/
.home header.masthead {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
/*Display "MENU" in burget menu icon*/
.x-btn-navbar i:after {
content: " MENU";
font-family: "Lato";
}
/*Add padding around logo*/
.x-brand {
margin-top: 5px;
margin-bottom: 5px;
}
}
/*Small - Tablet (portrait)*/
@media (min-width: 480px) and (max-width: 767px) {
/*Home slider right to the top and under the navbar*/
.home header.masthead {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
/*Display "MENU" in burget menu icon*/
.x-btn-navbar i:after {
content: " MENU";
font-family: "Lato";
}
/*Add padding around logo*/
.x-brand {
margin-top: 5px;
margin-bottom: 5px;
}
}
/*Extra Small - Phone*/
@media (max-width: 479px) {
/*Home slider right to the top and under the navbar*/
.home header.masthead {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
/*Display "MENU" in burget menu icon*/
.x-btn-navbar i:after {
content: " MENU";
font-family: "Lato";
}
/*Add padding around logo*/
.x-brand {
margin-top: 5px;
margin-bottom: 5px;
}
}
/*--------- FOOTER ------------*/
/*Control footer transparency and color*/
.x-colophon{
background-color: rgba(221, 219, 220, 0) !important;
}
/*Control font color of text in footer*/
.x-colophon.bottom .x-colophon-content {
color: rgba(54,48,48,1) !important;
}
/*Control footer social icon color*/
.x-colophon.bottom .x-social-global a {
color: rgba(54,48,48,1) !important;
background-color: rgba(255,255,255,1) !important;
}
.x-colophon.bottom .x-social-global a:hover {
color: rgba(73,168,150,1) !important;
background-color: rgba(255,255,255,1) !important;
}  
/*Control color of links in footer*/
footer.x-colophon.bottom a {color: #49a896;}
footer.x-colophon.bottom a:hover {color: #2b695c;}
/*--------- GO-UP ANCHOR LINK ------------*/
/*Edit Scroll top anchor*/
.x-scroll-top {
border: 0px solid rgb(73, 168, 150);
bottom: 20px;
color: rgb(73, 168, 150);
height: 40px;
line-height: 30px;
width: 40px;
font-size: 25px;
opacity: 1 !important;
}
.x-scroll-top i:before {
content: "\f102" !important;
font-size: 50px;
}
/*============================================================================*/
/* HOME PAGE */
/*============================================================================*/
/*Slider background*/
.x-flexslider {
background-color: transparent;
}
/* background mode of sections in home */
.home #x-section-1 {
background-size: cover !important;
}
.home #x-section-3 {
background-size: cover !important;
}
/* Force section slightly overlaping the home page slider*/
.home .entry-content{
position:relative;
margin-top:-25px!important; /* Adjust this to your needs */
}
/*-------- GO-DOWN ANCHOR LINK ----------*/
/*Anchor link icon on Home slider*/
.x-icon-angle-down:after {
content: "\f103" !important;
font-size: 60px;
}
.x-slider-scroll-bottom.below i:before {
display:none;
}
/*Remove circle around original anchor linc icon*/ 
.x-slider-scroll-bottom {
border: 0px !important;
}
/*============================================================================*/
/* BLOG PAGE */
/*============================================================================*/
/*Large - Laptop/Desktop*/
@media (min-width: 980px) {
/*Add top padding in blog page*/
.h-landmark {
padding-top: 35px;
}
}
/*Medium - Tablet (Landscape)*/
@media (min-width: 768px) and (max-width: 979px) {
}
/*Small - Tablet (portrait)*/
@media (min-width: 480px) and (max-width: 767px) {
}
/*Extra Small - Phone*/
@media (max-width: 479px) {
}
/*Control opacity and color of featured image highlights in post list*/
.entry-thumb:hover img {
opacity: 0.7 !important;
}
.entry-thumb {
background-color: #000000;
}
/*Eliminate link icon of images when hovering on*/
.entry-thumb:before {
content: "";
display:none;
}
/*Remove entry icons for all blog posts*/
.format-standard .entry-title::before {
content: "";
}
/*Remove highlight effect for featured images in single post view*/
.single-post .entry-thumb:hover img {
opacity: 1 !important;
}
/*Get rid of box around post images*/
.wp-caption, .gallery-item {
max-width: 100%;
border: 0px    padding: 0px;
background-color: #fff;
}
/*Disable text transformation in post image caption*/
.wp-caption>.wp-caption-text, 
.wp-caption>.wp-caption-text:last-child, 
.gallery-item>.wp-caption-text, .gallery-item>.wp-caption-text:last-child {
text-transform: none;
font-size: 12px !important;
}
/*Format of post featured image*/
.entry-featured {
border: none !important;
margin-top: 0px;
margin-bottom: 50px;
}
/*Hide excerpt in Blog page*/
.blog .entry-content.excerpt {
display: none;
}
/*============================================================================*/
/* SINGLE BLOG VIEW PAGE */
/*============================================================================*/
/*Center blog titles in single blog view*/
.single-post h1.entry-title {
text-align: center;
}
/*Large - Laptop/Desktop*/
@media (min-width: 980px) {
/*Adjust space between featured image and page top*/
.single-post .x-main.full {
margin-top: -171px;
}
}
/*Large - Laptop/Desktop*/
@media (min-width: 980px) {
}
/*Medium - Tablet (Landscape)*/
@media (min-width: 768px) and (max-width: 979px) {
}
/*Small - Tablet (portrait)*/
@media (min-width: 480px) and (max-width: 767px) {
}
/*Extra Small - Phone*/
@media (max-width: 479px) {
}
/*============================================================================*/
/* DESTINATIONS PAGE */
/*============================================================================*/
/*Large - Laptop/Desktop*/
@media (min-width: 980px) {
}
/*Medium - Tablet (Landscape)*/
@media (min-width: 768px) and (max-width: 979px) {
}
/*Small - Tablet (portrait)*/
@media (min-width: 480px) and (max-width: 767px) {
}
/*Extra Small - Phone*/
@media (max-width: 479px) {
}
/*============================================================================*/
/* GALLERY PAGE */
/*============================================================================*/
/*Add padding at the top of portfolio in Gallery*/
.page-id-7565 .cols-3  {
margin-top: 120px;
} 
/*Large - Laptop/Desktop*/
@media (min-width: 980px) {
}
/*Medium - Tablet (Landscape)*/
@media (min-width: 768px) and (max-width: 979px) {
}
/*Small - Tablet (portrait)*/
@media (min-width: 480px) and (max-width: 767px) {
}
/*Extra Small - Phone*/
@media (max-width: 479px) {
}
/*============================================================================*/
/* ABOUT PAGE */
/*============================================================================*/
/*Large - Laptop/Desktop*/
@media (min-width: 980px) {
}
/*Medium - Tablet (Landscape)*/
@media (min-width: 768px) and (max-width: 979px) {
}
/*Small - Tablet (portrait)*/
@media (min-width: 480px) and (max-width: 767px) {
}
/*Extra Small - Phone*/
@media (max-width: 479px) {
}
/*============================================================================*/
/* CONTACT US PAGE */
/*============================================================================*/
/* Syling of Contact Us form */
div.wpcf7 { 
background-color: none;
border: 0px solid #f28f27;
padding: 0px;
color: rgba(54, 48, 48, 1);
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
background: rgba(221, 219, 220,1);
color: rgba(54, 48, 48, 1);
border: 1px solid rgba(54, 48, 48, 1);
border-radius: 5px;
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] { 
background-color: rgb(73, 168, 150);
width:100%;
height: 45px;
text-align:center;
text-transform:uppercase;
border: 1px;
color: white;
border-radius: 5px;
}
/*Large - Laptop/Desktop*/
@media (min-width: 980px) {
}
/*Medium - Tablet (Landscape)*/
@media (min-width: 768px) and (max-width: 979px) {
}
/*Small - Tablet (portrait)*/
@media (min-width: 480px) and (max-width: 767px) {
}
/*Extra Small - Phone*/
@media (max-width: 479px) {
}

[Rad]

Hi there,

It still happens even by removing the entire CSS. The issue happens after waiting a couple of seconds, and it’s only possible through javascript. It’s loaded just fine, but something is running after the masonry is rendered.

I changed your code to this,

jQuery ( function( $ ) {
var masonry_interval = 0;
var masonry_seconds = 0;
$(window).load( function()  {
$(window).resize();
masonry_interval = setInterval( function () {
if ( masonry_seconds < 30 ) {
$(window).resize();
masonry_seconds = masonry_seconds + 1;
} else {
clearInterval ( masonry_interval );
}
}, 1000);
} );
} );

This will re-render the masonry layout in 30seconds, that should be enough unless your site is loading more than 30seconds.

Thanks!

[davidferp]

Thanks a lot Rad,

Given that there is no apparent reason for this issue, that is a really smart workaround.

That will do for now

Thanks a lot guys for being always so helpful!

[Rue Nel]

Hello There,

You are most welcome! We’re happy to help you out.
If you need anything else we can help you with, don’t hesitate to open another thread.

Cheers.

[Author]

Posts