Masonry Blog not as expected

Hey Dirk,

Thank you for the inquiry.

Please reset the Settings > Reading panel options to default, then select the blog page in the Enfold > Theme Options > Where do you want to display the blog settings. After that, set the Enfold > Blog Layout > Blog Layout to the very last option (Use the advance layout builder..). You can now use the advance layout builder for the blog page and it should show the content.

Best regards,
Ismael

Hi,

Thank you for the update.

Since you are using the layout builder, you will have to manually add the summary in the Excerpt box for each post. If the box is not available in the post editor, click the Screen Options in the top right corner of the dashboard, then tick the Excerpt checkbox.

Best regards,
Ismael

Hi,

Thank you for following up.

Did you also add the “combination of image, title and some text down under” inside the excerpt box? By default, only text is allowed in the summary or excerpt, and any html markup will be stripped or removed, which is probably why they are not visible.

Best regards,
Ismael

Hi,

Thank you for the info.

We tried logging in again to the dashboard, but the account above is no longer valid. Did you remove it? Please enable it again so that we could check the issue properly.

Best regards,
Ismael

Hi,

Thank you for the info.

The Excerpt box is actually disabled, so we enabled it from the Screen Options and added a short text in the field. (see private field)

You should now see the text “This is an excerpt” under the first post in the blog overview page.

Best regards,
Ismael

Hi,

Thank you for the info.

If I enter more text than the 2 words you did, there’s is only text and image and title disappear.

That happens because the content or excerpt container in the masonry element is actually an overlay, which is above the image. To adjust the size of the image or to make most of it visible, you can use the following css code.

.av-fixed-size .av-masonry-entry .av-inner-masonry-sizer {
    padding-bottom: 150%;
}

Default bottom padding value is 80%.

You can also try a different masonry size settings.

Best regards,
Ismael

Hi,

but doesn’t do the trick on larger screens or responsive

You can create more css media queries to adjust the bottom padding value on different screen sizes or devices. Example:

@media only screen and (min-width: 1300px) {
    .av-fixed-size .av-masonry-entry .av-inner-masonry-sizer {
        padding-bottom: 200%;
    }
}

The code above will apply the changes when the screen width is larger than 1300px. You may also need to control the number of characters in the excerpt, the maximum and minimum characters allowed, to make sure that the masonry grid is consistent.

Other solution is to use a different masonry size settings as we suggested above. You could also hide the excerpt and add a read more text instead.

// https://kriesi.at/support/topic/read-more-buttin-in-masonry-blogelement/#post-1282623

Best regards,
Ismael

Hi,

Why is the Masonry Blog not responsive and has to be customized that much?

The element is actually responsive but it does not work well with too much excerpt. It is suppose to highlight the featured images, not be covered with text.

Have you tried using a different Size Settings such as the Flexible Masonry? The advantage with this size option is that the image and the caption have separate containers so they do not overlap each other. Just make sure that the uploaded images have the same size and aspect ratio to get a perfect grid. The same thing can be done with the Portfolio Grid element, or the Blog Posts element set to grid layout.

whole container is too narrow and

You can also adjust the maximum container width for larger screens with css.

@media only screen and (min-width: 1800px) {
    .responsive .container {
        max-width: 1600px;
    }
}

Best regards,
Ismael

Hi,

In the demo, did you notice that the summary are short and concise, not more than two lines per item? That many characters in the excerpt should work fine, but the content container will still cover part of the image, almost 30% of the image in the demo’s case. In your site, you are trying to add longer excerpt, so the content container covers most of the image.

In the demo, the excerpt is also hidden on smaller screens using css.

@media only screen and (max-width: 989px) {
    .responsive .av-masonry-entry .av-masonry-entry-title+.av-masonry-entry-content {
       display: none;
    }
}

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael