[Resolved] Problems generate columns layout + section added above

[Thomas]

Hi there,

I have layout issues when adding a filter section (FacetWP plugin) above the blog loop with grid enabled.

Main problems are:

– top area ist overlapping the .site-content on the left
– everything inside .content-area is overlapping .content-area on the left side
– generate-columns-container isn’t centered (more space on the right, but not because of margin)

There’s in general a problem with adding FacetWP filters before the content, wrapping the loop with the necessary class and enabling generate columns. I’m using generate_before_main_content for the filters and generate_before_loop/generate_after_loop to wrap the loop but the class generate-columns-container includes the top area as well as the loop – maybe that’s causing the layout problems listed above?

Cheers,
Thomas

[Ying]

Hi Thomas,

Try adding this CSS:

.generate-columns-container {
    margin-left: 0;
}

[Thomas]

Hi,

Thanks, I didn’t spot that negative margin. There must be a reason for it being there in the first place, no? Is it save to use 0px?

I also noticed that .generate-columns has padding-left: 20px set for all elements, including the first one. This only changes to 0 on smaller devices. The result is that on larger devices the grid is never really centered. I corrected that but am wondering if the general set-up is sound (cross-broweser compatibility…).

Is adding the filters messing with the GP columns feature? Maybe because everything is inside generate-columns-container?

Cheers,
Thomas

[Fernando]

Hi Thomas,

The negative -20px margin-left is to negate the padding-left added to the articles which is meant for the spacing. With your structure, setting it to 0px should be good

The padding-left is set to 0 on mobile view so the it re-aligns to center by default. Your correction should be good.

Yes, the filter messed with the structure, however the codes you’ve added should have fixed them.

[Thomas]

Thanks.

Maybe you can implement another hook that allows for adding something like a filter section before the loop without interfering with the columns feature? The current hooks that allow this (e.g. after header) are outside the content structure and therefore don’t use appropriate styling.

Cheers,
Thomas

[Fernando]

Actually, thinking about it, Generate columns should work with your filter. Can you temporarily remove the code provided by Ying, and the custom padding you added so we can recheck what’s occurring?

[Thomas]

I removed all custom CSS, including something provided previously by support. As you see the grid isn’t working.

The main problem seems to be that the filter section is included in the generate-columns-container.

[David]

Hi there,

try adding this CSS:

.generate-columns-container {
    display: block !important;
}
.generate-columns-container .facetwp-template {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

[Thomas]

Thanks, the layout is already fixed though.

The question is if there can be a solution to add a filter section before the loop and within the content structure without it interfering with the generate columns feature. Basically outside generate-columns-container but within the main content…

[David]

Sorry i read the issue above and checked the URL provided and the columns were broken….

The generate-columns-container div is hooked into: generate_before_main_content so you can hook any elements in to that same hook, and set the priority to 9 or less for it to appear before the columns.

[Thomas]

Adjusting the priority did the trick – thanks!

Best,
Thomas

[David]

Glad to hear that!

[Author]

Posts