- This topic has 11 replies, 4 voices, and was last updated 3 years, 8 months ago by
.
-
Posts
-
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?
Customer Support
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!
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>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!
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>Customer Support
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.
Can you provide a html version for a 5 column structure according the Fernando example?
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-1Html from this example: https://share.getcloudapp.com/v1uOqqQB , please…
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>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>Customer Support
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.
- You must be logged in to reply to this topic.
