3 Column Archive Affecting Other Areas

  • Ian
    March 26, 2026 at 1:29 pm

    Once I turn on Columns inside Customizer > Archives to 3, this setting is affecting other GB blocks on the site. Disabling columns in Customizer brings the layout back to normal.

    I used this to target the archive sections to force them to 3 columns:

    body.blog #main,
body.archive #main,
body.search-results #main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: start;
}

body.blog #main .paging-navigation,
body.archive #main .paging-navigation,
body.search-results #main .paging-navigation {
    grid-column: 1 / -1;
}

    This works on the default blog page but on category pages, it is making the H1 title left align (/category/example/).

    Does this 3 column setting have a global selection so it affects other GB blocks? What is the best way to use the GP Customizer to control 3 columns and not have it affect other GB Blocks.

  • Ian
    March 26, 2026 at 1:34 pm

    Wait, this seems to work. Must be a better way than this manual method?

    /* Target archive pages to be 3 columns */
body.blog #main,
body.archive #main,
body.category #main,
body.search-results #main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: start;
}

/* Reset GP archive columns */
body.blog .inside-article,
body.archive .inside-article,
body.category .inside-article,
body.search-results .inside-article {
    width: 100%;
    float: none;
}

/* Full-width elements inside the grid */
body.blog #main .paging-navigation,
body.archive #main .paging-navigation,
body.category #main .paging-navigation,
body.search-results #main .paging-navigation,
body.search-results #main .page-header,
body.archive #main .page-header,
body.category #main .page-header {
    grid-column: 1 / -1;
}
  • Ian
    March 26, 2026 at 1:44 pm

    Wait another minute. The more I test, the more I feel that we should stop using the Customizer and just build a Loop Template and control things inside Elements?

  • Ying
    March 26, 2026 at 2:11 pm

    Hi Ian,

    Yes, you can use a block element – loop template.

    And yes, the customizer columns option affects the default layout and the query blocks; it’s a known issue. But with some tweaks in the query block settings, it can be fixed.

  • Ian
    March 26, 2026 at 2:22 pm

    Sounds good. Will use a Block Element, the customizer columns seems to be too aggressively targeting similar GB elements.

    Thanks!

  • Ying
    March 27, 2026 at 7:50 am

    You are welcome   🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.