[Resolved] Query loop ignore Blog column setting

[Javier]

I had a site where I created an Element Hook “before_main_content” shown in Blog page where I loaded two columns with two Query Loops for two different categories.

The first column was 33% width with all posts in a column, the second was 66% had all posts in two columns. Then in archive pages it showed with three as I set in the blog customizer settings (Customizer > Blog > Columns).

Before last update, it was ok, but now in the Hook element in both two columns it shows the posts in 3 column (as set in Customizer > Blog > Columns) instead of 1 and 2 columns.

I understand that the Customizer > Blog > Columns is mandatory of what I configure in the Query Loop blocks as it appears on the element div with grid-33, tablet-grid-50 and mobile-grid-100:

<div class="gb-grid-column gb-query-loop-item post-xxx post type-post status-publish format-standard has-post-thumbnail hentry category-xxx generate-columns tablet-grid-50 mobile-grid-100 grid-parent grid-33">

There’s some way to override the Customizer > Blog > Columns setting in Query Loop?

[David]

Hi there,

edit the Query Loop and select the Post Template block inside it, in the settings set the Flex Basis option to 100%
do that for both loops. That should overcome that issue.

[Javier]

Yes it solve the problem but the wrapper gets a -20px margin that it haven’t before.

<div class="gb-grid-wrapper gb-grid-wrapper-7c92601e gb-query-loop-wrapper">

In css:

.gb-grid-wrapper-7c92601e {
  margin-left: -20px;
}

It’s normal?

[Javier]

This issue is in mobile view:

[David]

Hmmmm… odd one that.
Try this CSS to correct that:

@media(max-width: 769px) {
    .gb-query-loop-wrapper {
        margin-left: 0 !important;
    }
}

[Javier]

Thank you David!

[David]

You’re welcome

[Author]

Posts