Archived topic
Help me with same gap and border-bottom
11 replies · Started by iamarghya on June 7, 2022
In the bottom in the 'latest article' section in the right grid there are 4-post in list. I tried to select the 'li' and giving a box-shadow but it didn't work.
But Now I want to set the gap of all post in the list same and give a border-bottom line to separate and also if possible set the position of the 'published date' with according to end of the image.
This is a bit complicated due to the structure of the WP latest posts Block’s structure.
Rather than using CSS, I would suggest using a GB Query Loop Block instead which is available in GB version 1.5.0: https://generateblocks.com/generateblocks-1-5-dynamic-data-query-loops-image-blocks/
Here’s a fix you can try for Desktop but I'd still suggest GB Query Loop Block:
@media (min-width: 1025px) {
.home .right-side ul.wp-block-latest-posts li {
border-bottom: 1px solid #000;
display: flex;
position: relative;
margin-bottom: 6px;
}
.home .right-side ul.wp-block-latest-posts li .wp-block-latest-posts__featured-image {
float: unset;
}
.home .right-side ul.wp-block-latest-posts time.wp-block-latest-posts__post-date {
position: absolute;
bottom: 0;
left: 170px;
}
}Replace 1025 with 769 if you want to apply it to tablet as well.
Hope this helps!
I also thought for query loop but as it is still not stable I think I will just wait for it?
I think It worked perfectly for now, can you check it....
Yes, that would be fine. You may use the code I provided here temporarily first if that's what you prefer.
On tablet though, you might want to check your layout at that section. Even without the code, the two columns are overlapping.
Yea It worked Thanks.
You're welcome!
Yea I saw that but couldn't find the problem, what have I done wrong?
Hi there,
what is the problem ?
oh sorry! didn't see...
Problem is if you down the page there is a latest article section but when u resize it the layout is not correct. Two columns are overlapping. And as Fernando says it is overlapping even without the code which I use to give it a separator border-bottom.
It's because the WP latest posts block is not responsive.
I would recommend using GB's query loop block instead, it will give you much more control.
https://generateblocks.com/generateblocks-1-5-dynamic-data-query-loops-image-blocks/
oh ok ok
