Home Forums Weaver Xtreme Theme Masonry question

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #21863

    I’m having the same problem. When the page is loading, you can see it first display the “bricks” (each post) in the default font size defined in the theme settings for the content area, and the vertical spacing between the posts looks correct. But I have a font size override specified in my style.css to make the titles and excerpts for the bricks a smaller font size, and you can see that as the custom font size is applied, the bricks are resized properly, but not repositioned properly. It almost seems that the masonry layout is happening before my style.css is loaded. I tried a similar test making my font size override to be a larger font than the default and this resulted in bricks that overlap, so I’m pretty sure it is related to this. But why isn’t my style.css file being loaded first?  Note that I have a child theme to override some things, but I don’t think I could have changed anything related to when the style.css is loaded. This could explain a lot of flashing I see as my page loads… (even before I turned on the masonry layout).


    This discussion was created from comments split from: gap between posts in masonry.


    And the link to the page showing the problem would be what?  🙂


    Sorry. Didn’t get notice that you moved this to a new thread (but I really think this is the same problem he was describing). My sandbox is at http://178.8a0.myftpupload.com/. Below the first most recent post, I use the masonry layout for the previous posts. When it first loads you’ll see a pretty big gap between the bricks, vertically. Then just barely resize the browser and you’ll see those huge gaps disappear. (There are some other layout issues on the page you can ignore. I need to tweak some css rules because of the masonry layout changes.)


    This is strangle there is a refresh issue.

    You need to test deactivating ALL non weaver plugin, to see if one is interfering.

    If the problem goes away when deactivating ALL plugins, reactivate one by one to find the culprit


    OK, I deactivated all plugins. Still had the problem. Then I removed my style.css so there were no custom rules. The problem appeared to go away. So I slowly added rules into a fresh style.css file and I can reproduce the problem with this simple style sheet:

        div#blog-posts.masonry { background-color: rgba(228,217,194,0.3); }
        div#blog-posts.masonry article { border: 1px solid #AAAAAA !important;  }
        div#blog-posts.masonry article.post { background-color: #FFFFFF; font-size: .75em; }

    The first 2 rules are just there so I can better see the boundaries of the elements. It is the font-size attribute that is throwing this off.
    I believe any font/size rules I put in my style.css will affect it. I did another test. I removed the font-size: .75em rule on the masonry post and added this rule instead;

        body { font-family: Times; font-size: 24px;}

    This also throws off the calculations. Since this font size is bigger, some of the bricks have tighter spacing than others, but it fixes itself if you resize.
    I also just tried:
        body { font-family: Times; }

    without the font size change. This also breaks.
    Also, if I add padding to the brick (div#blog-posts.masonry article { border: 1px solid #AAAAAA !important; padding: 10px !important;  } ), it causes overlap of some (but not all) bricks.

    This may be because you are adding the CSS in an other CSS file, so it is not loaded at the right time. For it to work, the CSS must be applied before Masonry makes its calculations.

    You may (not) know that you do not need to create your own CSS file, you can simply put All your custom CSS in Main Options > Fonts & Custom > Custom CSS Rule box.

    Put at least your rules affecting masonry there and check if that still causes an issue.


    I moved those few rules to the Custom CSS Rule box and completely eliminated my style.css and I still see the problem. I also switched to the Weave Xtreme theme directly instead of the child theme I’d created. So I’m running it pretty much out of the box with the only customizations being the settings in the Theme Options UI. Oh, and I tried Chrome, IE, and Firefox and all are the same. Any other thoughts?


    @weaver, can you see a reason why if she uses Custom CSS to change the font size in the masonry page it causes a refresh error in the position of the masonry bricks

    Basically it looks like When the page loads, the masonry calculation are using the default font size to compute the brick size and positions, then the font size is changed, in this case to a smaller font, and that makes the boxes shrink without the Masonry positions being updated.


    I think the main issue is that YOU (the content creator) can’t use .masonry as a class selector. This is a class added dynamically by the Masonry script, and trying to mess with that is messing Masonry. The fact that you are additionally displaying posts in more than one way further complicates the issue.

    One thing that works is:

    #blog-posts{ background-color: rgba(228,217,194,0.3); }
    #blog-posts { border: 1px solid #AAAAAA !important;  }
    #blog-posts article.post { background-color: #FFFFFF; font-size: .75em; }

    Depending on how you are actually generating those posts to display, you could either prefix the above rules with a .page-id-123, or wrap the posts with their own <div> with a specific class or id if you want to confine the styling to a specific set of posts.

    But you can’t use .masonry.

    And it looks as if the Per Page styling rules won’t work either – probably because of loading order of CSS vs. Masonry script.

    It does seem to work, after all. Must have had some kind of error the first time I tried per-page styling for this.

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