Masonry Blog and Posts created with Layout Builder - Support

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
May 9, 2021 at 12:58 pm #1299166
diggital
Participant
Hi, I open a new thread in addition to this one:
https://kriesi.at/support/topic/masonry-blog-not-as-expected/#post-1297901

I created a Blog page and single posts using the Layout Builder.

There are 2 things open:

1) CSS to adjust the Blog page Masonry on larger screens (> 1800px).
You provided this CSS before:
```
@media only screen and (min-width: 1800px) {
    .av-fixed-size .av-masonry-entry .av-inner-masonry-sizer {
        padding-bottom: 250%;
    }
}
```
In combination with this suggested code (to extend the Masonry container on larger screens, which unfortunately doesn’t work yet):
```
@media only screen and (min-width: 1800px) {
    .responsive .container {
        max-width: 1600px;
    }
}
```
Can you check it again, please?

2) Post navigation:
There are 2 arrows showing left and right at each single post page (as in your Demo) in the middle. How is it possible using the Layout Builder to get the similar posts (“You might also like”) placed above the comments?

Especially on mobile phones there is no navigation or any reference to other posts and even on larger screens the arrows might not be noticed by users.

It would be great to get support, otherwise the whole basic Blog functionality is not given…

Best regards,
Dirk
May 11, 2021 at 12:03 pm #1299648
Yigit
Keymaster
Hey Dirk,

Thanks for contacting us!

1- I adjusted the code a bit and added to bottom of Quick CSS field
```
/* Increase container width to 1600px on screens above 1800px */
@media only screen and (min-width: 1800px) {
    .responsive #top .container {
        max-width: 1600px;
    }
}
```
I attached screenshot in private content field below.

2- You can add following code to bottom of Quick CSS field to enable post navigation on mobile
```
@media only screen and (max-width: 767px) {
.responsive #top .avia-post-nav {
    display: block;
}}
```
Best regards,
Yigit
May 11, 2021 at 2:03 pm #1299681

diggital
Participant

Hey Yigit,

thanks for helping!
Now the whole container (including Header) is extending. I meant only the Masonry container didn’t extend before. I post a screenshot to show how it should be on larger screens.

Enabling the post navigation on mobile is an option, but we also want to use the similar posts (“You might also like”) from the Demo as well above the comments on a single post page. How can I do that with the Layout Builder?

Best regards,
Dirk

May 12, 2021 at 12:27 pm #1299910
Yigit
Keymaster
Hi Dirk,

Please change this code
```
/* Increase container width to 1600px on screens above 1800px */
@media only screen and (min-width: 1800px) {
    .responsive #top .container {
        max-width: 1600px;
    }
}
```
to following one
```
@media only screen and (min-width: 1800) {
.responsive.html_stretched .av-masonry-col-flexible .av-masonry-entry, 
.responsive.html_av-framed-box .av-masonry-col-flexible .av-masonry-entry {
    width: 25%;
}}
```
Best regards,
Yigit
May 17, 2021 at 9:33 am #1300667

diggital
Participant

Hi Yigit,

thanks for the new code, it works like a charm! :)

Only thing left is the similar posts (“You might also like”) in the Layout Builder. How can I use this?
Having suggested posts as in the Demo above the comments would attract more people.

Best regards,
Dirk

May 17, 2021 at 4:38 pm #1300779

Yigit
Keymaster

Hi Dirk,

You can add Blog Posts element to your page, choose to display entries from custom taxonomy > Post Tag and choose the tag and then in Filter > Offset Number field you can choose not to allow duplicates.
Related posts are based on tags by default that is why I am suggesting using tags but you can use categories as well :)

Best regards,
Yigit

May 19, 2021 at 9:09 am #1301155

diggital
Participant

Hi Yigit,

thanks for your help.

I tried using the Blog Posts element and copied one post (not published) to find the right settings coming close to the layout in your Demo.
Could you please check it? Something must be missing and not all posts (we have only 5 yet) are displayed.

We used tags as well, but for now I used Taxonomy > Category and Grid Layout with 4 cols, manual Thumbnail Size and Title only. For the Filter I chose All Posts and for Offset duplicates not allowed.

It would be great showing them all with maximum 6 of the newest in the future and no duplicates.

Best regards,
Dirk

May 24, 2021 at 1:19 pm #1302003

Yigit
Keymaster

Hi Dirk,

I am sorry for my late reply!

Could you please post a link where we can see the issue? I checked your posts on your blog page however could not see related section in any of them.

We may need temporary WP admin logins to look into it so please share them privately as well :)

Best regards,
Yigit

May 24, 2021 at 2:41 pm #1302017

diggital
Participant

Hi Yigit,

the former credentials are still valid and I post it below.
Hope this helps, would be great to come close to what is in the Demo ;)

Best regards,
Dirk

May 24, 2021 at 3:03 pm #1302025

Yigit
Keymaster

Hey,

I edited your Blog Posts element and went to Styling > Pagination > Post Number and chose 6 and then in Appearance > Image Size, I chose medium. It is not exactly as Masonry element used in demo but could you please review your draft? :)

Regards,
Yigit

May 24, 2021 at 3:23 pm #1302033

diggital
Participant

Thanks Yigit!
If there’s no duplicate, this should work. The layout of the “You might also like” Demo is too much customizing, I guess?

Best regards,
Dirk

May 24, 2021 at 4:02 pm #1302041
Yigit
Keymaster
Hi Dirk,

I set column count to 2, give your element a custom CSS class “rel-posts” in Advanced > Developer Settings and then added following code to bottom of Quick CSS field
```
.rel-posts .slide-image {
    float: left;
    border-radius: 100px;
    margin-right: 15px;
}
.rel-posts .slide-entry { 
    background-color: #fcfcfc;
   border: 1px solid #e1e1e1;
   padding: 6px;
   border-radius: 3px;
} 
.rel-posts .slide-content {
    margin-top: 20px;
}
.rel-posts .av_one_half.slide-parity-even {
    margin-left: 1%;
}
.rel-posts .av_one_half {
    width: 49%;
}
```
Please review your website :)

Regards,
Yigit
May 24, 2021 at 4:14 pm #1302049

diggital
Participant

Hey Yigit,

that’s great!!! Thanks a lot :)

Best regards,
Dirk

May 24, 2021 at 4:21 pm #1302053

Yigit
Keymaster

Hey,

You are welcome, Dirk!
Let us know if you have any other questions and enjoy the rest of your day :)

Best regards,
Yigit
Author

Posts

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Masonry Blog and Posts created with Layout Builder’ is closed to new replies.