[Resolved] query loop broken when used in homepage with “last article”

[Fabio]

hi all, this afternoon i found one website with homepage not working correctly like two days ago

this is my situation:
– homepage in mode “last articles”
– blog layout set on 3 columns from customizer
– an block element with a query loop 100% with for the first article ( the most recent)
– homepage has only 1 row of articles, with 3 articles set with a offset by 1

it was working all well, but now i found the first article section, with a with of 33%, in few words it automatically get grid-33 class ( or maybe other) that come from, i suppose, my 3 columns settings in customizer.

now, obviously i can change settings, create a static home, put inside two blocks with 1 and 3 articles ecc.

but i would like to know if my current situation is normal or not, if i made something wrong or if there is something i can do to make it working like two days ago, i don’t know if it’s related to new GP and GB update or not
thank you !

[Jean Paiva]

Hello Fabio,

Please, can you share the website link?

[Fabio]

hello Jean,

unfortunately i can’t share cause it’s stil in dev, but i replicated the “problem” here:
https://wordpress-505268-2939073.cloudwaysapps.com/
i put a light grey background on first section to see that some days ago it was 100% width

while recreating my problem, i found one fix, but i don’t know why it works
i had to put 100% on Post Template Flex Basis field

to make it visible like two days ago

but if you check code that section still has a .grid-33 class

[Fernando]

Hi Fabio,

Why not enable Make first post featured in Appearance > Customize > Layout > Blog, and then create a Block Element – Content Template for the first post?

If you’re wanting to display a specific post as the featured post, you can set that post to “stick on top” in the page/post settings.

This should be a more appropriate approach.

[Fabio]

Hi Fernando,

thank you for reply, i know there are several ways to make the homepage like i would like, and to be honest , in last days i learned news ways so i will change all the structure ( another time ), but my question was why two days ago it was working all well, and now it seems there a problem. i say it seems cause i don’t know if simply my page had a wrong setting and it was only a lucky case it was working.

so my question is: is it normal that with a block element with a single post it gets the gird-33 class automatically istead of having the 100% width?

this said, if i follow your instructions, i can have a featured image, but that will be double the current post grid, do it becomes a grid-66. and not a 100% width, like this:

so, if i put a block element, without a query loop, but only a grid with two columns, it works, only when i put query loop it inherit grid-33 width
see here:

[Fernando]

I see. If that’s the case, can you try adding this PHP snippet?:

add_filter( 'post_class', function( $classes ) {
	if ( ( is_archive() || is_home() ) && in_array( 'gb-query-loop-item', $classes ) ) {
		$index = array_search('generate-columns',$classes);
if($index !== FALSE){
    unset($classes[$index]);
}
		
	}

	return $classes;
} );

This should remove generate-columns class for your Query Loop.

[Fabio]

it works now https://wordpress-505268-2939073.cloudwaysapps.com/

so, that means before the update there was such a code, and now with new GB or GP update there is not anymore ?

it will be fixed with next update or it will remain in this way?
thank you!

[David]

Hi there,

any posts that are output inside the GP generate-columns-container will automatically attract the relevant grid classes. So that is kinda expected, and i am not sure why that would have been any different before.

You’re solution of using Flex Basis 100% is the easiest fix.
The basis property tells a flex item what the preferred width should be, and that trumps a width property.

We are reviewing the way the Grid works for the Query Loop, and we’ll take a look at how this can be improved.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Fabio]

Hello David

thank you!

i tried to load a backup from my cloudways but i have automatic update on your plugins so i can’t recreate previous settings.

but, i saw one thing, some days ago when it was “working”. i had this code:
.gb-grid-wrapper > .gb-grid-column-76f79997 {
width: 100%;
}
.generate-columns.grid-33, .grid-sizer.grid-33 {
width: 33.3333%;
}

where obviously the first one has priority and overwrite the second.

after plugin updates i have:

.generate-columns.grid-33, .grid-sizer.grid-33 {
width: 33.3333%;
}
.gb-grid-wrapper > .gb-grid-column-76f79997 {
width: 100%;
}
.generate-columns.grid-33, .grid-sizer.grid-33 {
width: 33.3333%;
}

width:33% are both from wp-content/plugins/gp-premium/blog/functions/css/style.min.css?ver=2.1.2
the other is from index generateblocks-inline-css

[David]

Hmmm…. odd one, i can’t see what would have changed to cause a different CSS loading order.
I’ll have a word with Tom and Jean.

But as i said, the Query loop grid is under review so we’ll definitely look to improve on that.

For the time being are you ok with the Flex Basis 100% fix ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Fabio]

oh yes yes i’m ok with flex grow 1 or basis 100% no really problems, i only wanted to understand where i made mistakes

i already set resolved the this topic, thank you !

anyway i just installed GB pro 1.5.4 and the problem is not present

as you can see there is not a repetition of
.generate-columns.grid-33, .grid-sizer.grid-33 {
width: 33.3333%;
}

[David]

ITs really weird as GB should have no influence over that CSS …. we’ll do some more tests 🙂
Thanks for reporting.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Fabio]

thank you ! 🙂

[David]

Thank you ! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts