[Resolved] Facet WP with blog archive

Home Forums Support [Resolved] Facet WP with blog archive

Home Forums Support Facet WP with blog archive

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2117831
    Christine

    Hi! I’m setting up FacetWP on a GB/GP site.
    Unlike with other themes I’ve tried it didn’t work out of the box on GP’s blog archives. When I first tried, the facets were not visible.

    FacetWP says sometimes you need to wrap the loop with their CSS class: https://facetwp.com/help-center/troubleshooting/using-the-right-query/

    And this code was offered in the past to make it work with GP: https://gist.facetwp.com/gist/gist-327b6cf26e13c39582e5baa79b5508f5/
    Which is about the same advice offered here: https://generatepress.com/forums/topic/generatepress-and-facetwp/#post-845032

    When I used the code, the facets were now visible (yay), however the layout of my blog archive was broken. Only one column showed instead of 3, and sometimes only half a column.

    Any clue how I can get it to work? This is my ideal solution if possible.

    As a secondary solution I could use the shortcode method and build my content cards within facet wp. In this case I want the cards to match the ones I already created using GenerateBlocks. How can I grab the html/css of my generate blocks cards so I can rebuild the template?

    #2117845
    David
    Staff
    Customer Support

    Hi there,

    could i see the blog with the Facet WP and the broken columns ?

    #2118217
    Christine

    Hi David,

    Ok, check out the blog page now. I added the opening div with a class of facetwp-template, and the closing div, using hook elements. And now the facets appear the way I made them. Only the layout is broken. I will be so happy if you can figure out how to solve it. Thank you!!

    #2118241
    David
    Staff
    Customer Support

    Try adding this CSS:

    .generate-columns-container:not(.masonry-container) {
        display: block !important;
        margin-left: 0;
    }
    @media(min-width: 769px) {
        .generate-columns-container:not(.masonry-container) .facetwp-template {
            display: flex;
            flex-wrap: wrap;
            align-items: stretch;
        }
        
        .generate-columns-container .facetwp-template {
            margin-left: -40px;
        }
    }
    #2118367
    Christine

    Amazing! It works! Thank you SO MUCH!

    #2118382
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.