Masonry Blog Format Problems

I like how the Masonry blog layout looks, but I’m having some issues with it.

It seems like the posts aren’t sorted chronologically, left to right, top to bottom, newest to oldest. Why are there no options to set the sorting order?

Also when I use the customizer, it appears that on tablet form, there is only one column (one post) per row, and a significant amount of whitespace on the right side. On mobile there is a different issue, where the page width does not adapt, and can scroll side to side. Also there is a black that takes up about 1/3 of the width of the page on the right side between each post.

It appears that these issues are specific to the Masonry layout, as the List and Full Width layouts have no issues adjusting to the Tablet and Mobile customizer views.

Any help would be appreciated.

For me, it looks like the issue is related to the ’ element.style ’ having a fixed width: 380px. When I uncheck this in the inspector, the width becomes fixed and the black bar disappears, but the ‘Read More’ buttons is still cut off.

The ‘Read More’ buttons are also not centered and there is no way to customize that, which is strange from a design standpoint.

Hello @davidtong,

I have just tried to recreate this issue on my local Astrid install. It looks like a theme issue, I have already added it to our list. Thank you for pointing it out.

Kind Regards, Roman.

Can I expect a resolution in a timely manner? I didn’t post this issue here simply to report it as a bug, I was looking for a solution.

In addition, I was wondering why on the home page for the div:

<div id="primary" class="content-area fullwidth"> ==$0

there is a

.content-area {
    <strong>margin-left: -1px;</strong>
}

?

This was the cause of a lot of headache for me, as when I tried to add a quiz plugin to the page it created whitespace on the right side. I am no CSS expert, but this seems like a lazy solution to some other problem which ultimately results in a theme that generates more problems for users.

Hi,

  1. Here’s a solution for the whitespace thing until we update the theme. Add this in Customize > Additional CSS:

@media only screen and (max-width:767px){.masonry-layout .hentry{max-width:600px}.masonry-layout .posts-layout{margin:0 auto;max-width:100%!important}}

  1. There are no options to sort the posts order because there isn’t such a possibility in the masonry script that’s bundled with WordPress
  2. The -1px thing is there to overlap some borders. It’s the only solution for this type of bordered content.

When use the customizer, if I switch to mobile view and then to tablet view, the columns overlap each other.

As mentioned, the final solution will be in the next update. The current one doesn’t handle edge cases.