Theme Author
Tom
(@edge22)
Hi there,
This is more of a CSS question than a theme question. The best way to handle grid gap in flexbox is to use margin.
This article may help: https://coryrylan.com/blog/css-gap-space-with-flexbox
I like putting a negative margin-left
on the block container, then adding the positive margin-left
to each container item.
Hope this helps!
Thread Starter
Karis
(@askel45)
I tried that before posting here (same article). It didn’t work. I guess I will go back to the CSS grid. It’s so much easier to work with it than flexbox for an amateur like me.
Edit: This CSS works when there is no page navigation (e.g. on search pages if the results are less than the number of posts per page). But does not work when there is page navigation because it is the last flex item and I have set its flex basis to 100%.
.separate-containers .site-main::after {
content: '';
flex-basis: 32.5%
}
Thread Starter
Karis
(@askel45)
Or alternatively, is there a way to move the bottom navigation in homepage and archives out of the .site-main
class? Perhaps unhook it and hook it before footer? I have tried all tricks, even trying to target second last element in the flex but nothing works when the navigation is there. I still get the spacing when the last items are an even number.
Hi there,
Try this:
@media(min-width: 769px) {
.site-main {
display: flex;
flex-wrap: wrap;
margin-left: -1em; /* offset article gaps */
}
/* Force navigation to fill 100% of row */
.site-main nav {
flex: 1 0 100%;
}
.site-main article {
width: calc(50% - 1em); /* remove margin-left from width */
margin-left: 1em;
}
}
Thread Starter
Karis
(@askel45)
@diggeddy thanks for your input. One small issue is that the code leaves a margin on the far-left. The far-right has no margins though. Do you have a solution to this?
Edit! seems adding !important
to site-main’s -1em
solves the issue. But I would appreciate a workaround to stop using the !important.
Solved with aqdding .no-sidebar
to .separate-containers.no-sidebar .site-main
. Thanks everyone!
Thread Starter
Karis
(@askel45)
@diggeddy last question, the last one or 2 flex items (except the last one) leave a margin at the bottom (the one occupied by site-main>*
) when there is no page navigation (e.g if a search term returns less number of items than the pages assigned per page). Is there a way to remove this margin? See this image https://prnt.sc/uhxhq5
solved using .site-main{margin-bottom:0;}.site-main>*,.site-main>:last-child{margin-bottom:18px}
Glad we could be of help.
Works fine, but how can I exclude it in the mobile version?
My website.
Hi @face0ff
you can you set CSS resposnively using media queries – this document explains how:
https://docs.generatepress.com/article/responsive-display/
If you need any further assistance please raise a new support topic as this is resolved.