[Support request] Custom content in responsive columns

[Tesco]

I need to add some custom loops and I would like to get them in 5 responsive columns (one loop in a 5 column row), (second loop in a 5 column row bellow the first loop) .

Is there any css in the theme that allows me to do that?

[Fernando]

Hi Tesco,

There’s no such functionality in GP wherein you can have a custom query and automatically have them in columns.

Perhaps you can use a GenerateBlocks Query Loop Block instead for the query. Through this, you can set it up in 5 columns.

Otherwise, you’ll need custom code to achieve it.

Hope this clarifies!

[Tesco]

My problem is not the custom query.

What I need to know is if Generatpress has (built in) the CSS for the responsive columns…

For instance:

<div class="row">
<div class"one"></div>
<div class"two"></div>
<div class"three"></div>
<div class"four"></div>
<div class"five"></div>
</div>

[Fernando]

I see. It does. See this for reference: https://docs.generatepress.com/article/using-columns-in-the-blog/

It’s integrated into the Blog and Archive pages.

If you look at the HTML structure of a Blog page, the CSS is integrated to CSS classes: https://share.getcloudapp.com/v1uOqqQB

You can use this structure for your custom Query to try to integrate the column system.

The article above also discusses how to alter the columns in GP for a specific page.

Hope this clarifies!

[Tesco]

Can you provide a html version for the structure example bellow?

Example:

<div class="row">
<div class"one"></div>
<div class"two"></div>
<div class"three"></div>
<div class"four"></div>
<div class"five"></div>
</div>

[Leo]

To answer this question:

What I need to know is if Generatpress has (built in) the CSS for the responsive columns…

The answer is not anymore – we’ve implemented Flexbox structure throughout the entire theme since September 2020 as it’s much more efficient without dependency:
https://generatepress.com/generatepress-3-0-a-new-era/

I would highly recommend trying the query loop block as Fernando suggested.

If not that doesn’t work for you then you’d basically need to write your own flexbox structure
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

There should be lots of other tutorials on Google as well since it’s not a theme-specific question.

[Tesco]

Can you provide a html version for a 5 column structure according the Fernando example?

[Leo]

The HTML structure to create 5 columns?

If so the CSS-tricks above should have some similar examples.

Or just Google “flexbox columns” to see some more examples.

Or you can add a Grid block and set it to 5 columns then inspect the HTML structure and CSS involved:
https://docs.generateblocks.com/article/grid-overview/
https://docs.generateblocks.com/article/container-overview/#container-width-1

[Tesco]

Html from this example: https://share.getcloudapp.com/v1uOqqQB , please…

[Fernando]

You can try something like this:

<div class="generate-columns-container">
    <article class="grid-20"></article>
    <article class="grid-20"></article>
    <article class="grid-20"></article>
    <article class="grid-20"></article>
    <article class="grid-20"></article>
</div>

[Tesco]

Hi!

If I use the code above in a custom loop (inside a shortcode), the page where it will be showed, will have this:

<article "post-842 page type-page status-publish no-featured-image-padding" itemtype="https://schema.org/CreativeWork" itemscope="">

other html...

<div class="generate-columns-container">
  <article class="grid-20" id="post-821" class="post-821 has-post-thumbnail hentry generate-columns tablet-grid-50 mobile-grid-100 grid-parent grid-20 no-featured-image-padding" itemscope="" itemtype="https://schema.org/CreativeWork"> 

<strong>here is post 1 of my custom loop </strong>

</article>

  <article class="grid-20" id="post-821" class="post-821 has-post-thumbnail hentry generate-columns tablet-grid-50 mobile-grid-100 grid-parent grid-20 no-featured-image-padding" itemscope="" itemtype="https://schema.org/CreativeWork"> 

<strong>here is post 2 of my custom loop </strong>

</article>
</div>

other html...

</article>

As you can see, this page will have an <article>, and, inside that article, will have more <article>‘s… And this is not logical…

So, my question is if there’s any way of removing the <article> section from pages where I use my shortcode without messing around with generatepress core files?

This is what I want to remove from those pages:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> <?php generate_do_microdata( 'article' ); ?>>

</article>

So I can have this:

<div class="generate-columns-container">
    <article class="grid-20"></article>
    <article class="grid-20"></article>
    <article class="grid-20"></article>
    <article class="grid-20"></article>
    <article class="grid-20"></article>
</div>

Instead of this:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> <?php generate_do_microdata( 'article' ); ?>>
<div class="generate-columns-container">
    <article class="grid-20"></article>
    <article class="grid-20"></article>
    <article class="grid-20"></article>
    <article class="grid-20"></article>
    <article class="grid-20"></article>
</div>
</article>

[David]

Hi there,

<article> within <article> is valid HTML and depending on it use it is also semantically correct, see here:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article

If that is acceptable then use a Query Loop on a static page to create your multiple loop.

If that is not acceptable or you require this on a dedicated template then that would need Custom Development.

[Author]

Posts