Archived topic
Query loop ignore Blog column setting
6 replies · Started by Javier on November 8, 2022
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?
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.
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?
This issue is in mobile view:
Hmmmm... odd one that.
Try this CSS to correct that:
@media(max-width: 769px) {
.gb-query-loop-wrapper {
margin-left: 0 !important;
}
}Thank you David!
You're welcome
