[Resolved] Responsive Post Grid with 5 / 4 / 3 / 2 / 1 Columns

[AMBTL]

Hi,

I would like to build a responsive CPT grid with Toolset Views.
I would like to achieve responsive behavior as in this example from Essential Grid:
https://essential.themepunch.com/youtube-stream-grid-plugin/
5 columns are reduced to 4 on smaller screens, then to 3, to 2 and finally to 1 column. The breakpoints should be customizable.
I cannot do it with Essential Grid, because I will need Toolset’s filtering power.

So, I designed a styled loop, but there seems to be an issue with GeneratePress. I thought my code was wrong, but when I pasted it into another sandbox site with the Ark theme, bang, it started to work as in the Essential Grid example. Then I activated GeneratePress on that site and it still worked. But when I deactivated the Ark Core Plugin and Ark Framework, it stopped to work and the effect was the same as on the original site: somehow the full width of the row wasn’t calculated correctly and the cells didn’t fill the row, leaving blank space on the right. There is no paddings/margin issue.

I deactivated other plugins and it was still the same. To exclude Toolset issues, I created a page with dummy content and added the CSS to customizer. Still the same. Therefore, it doesn’t seem to be a Toolset thing, but a GP thing.

Here is the Toolset Loop and the CSS:

<div class="amx-grid-container-full-width">	
<wpv-loop>
<div class="amx-grid-cell">
        <div class="amx-inner-cell">
                [wpv-post-featured-image size="full"]
		[wpv-post-link]
		[wpv-post-excerpt length="20" count="word"]
         </div>
</div>
</wpv-loop>
</div>

—————————————————–
.amx-grid-container-full-width {width: 100% !important;}
.amx-inner-cell {max-width: 100%;}

.amx-grid-cell {
position: relative;
min-height: 450px;
padding-right: 10px;
padding-left: 10px;
}

@media (max-width: 767px) {
.amx-grid-cell {
width: 100%;
float: left;
}
}

@media (min-width: 768px) {
.amx-grid-cell {
width: 50%;
float: left;
}
}

@media (min-width: 1068px) {
.amx-grid-cell {
width: 33.33%;
float: left;
}
}

@media (min-width: 1200px) {
.amx-grid-cell {
width: 25%;
float: left;
}
}

@media (min-width: 1600px) {
.amx-grid-cell {
width: 20%;
float: left;
}
}

This setup works nicely in the Ark theme, as far as I can tell, just like the example from Essential Grid. Why doesn’t it work in GP? Is there a fix to make it work?
I thought about Lightweight Grid Columns, but AFAIK it doesn’t support so many custom breakpoints. Or perhaps there is another method to achieve the same kind of responsive layout as in the above example?

Cheers
Tom

[Tom]

Can you link me to the page while it’s not working properly?

[AMBTL]

The website is not yet live and not ready to be seen by the general public.
I can switch off maintenance mode and send you the link.
I couldn’t find an email address. Can I use the pre-sales contact form, or your FB page?

[Leo]

Try the Account Issues here: https://generatepress.com/contact/

Just mention the topic.

[AMBTL]

Thank you Leo, just sent a message through the contact form.

[Tom]

Have you considered settings the widths to 20% (not 17%), and then adding the margin to an inner element? That way the widths are exact, and you can adjust the separating space between each column.

[AMBTL]

Yes, it was 20%. And it is 20% in the other example.
I did 17% only as an experiment and forgot to change it back.

It makes no difference. Even if I set it to 10% or 5%, I will only get 4 columns + blank space on the right. The widths are simply ignored.

But they are not ignored completely, for example: setting 24% creates 3 columns + blank space. Increasing the percentage leads to a reduction in the number of columns, but not in a logical way.

Setting display: flex or display: inline-flex on the parent container makes the cells appear in one long row.
But then adding flex-wrap: wrap creates the same effect: 4 columns max and blank space on the right.

Something is strange. Setting widths in CSS is elementary stuff, and somehow it doesn’t work in GP. It works in other themes.

Can you achieve the same responsive behavior on your site: 5 fluid columns reduced to 4,3,2 and 1?

[Tom]

Did you try removing the margin from the columns?

If you set something to 20%, but add 10px of margin on either side, the width is now 20% + 20px.

It may work on some themes if they apply box-sizing to every element, but GP doesn’t do that (not sure why any theme would, if it was meant to be applied to every element, then it would be default).

[AMBTL]

I don’t have any margins at all in my grid. Inspector doesn’t see any margins, either. Setting “margin: 0 !important” doesn’t change anything.

I only have “padding: 10px” but it is inside the columns and changing this value to 0 or something else, produces logical results (padding visibly changes), but obviously doesn’t solve the issue.

Setting a percentage width of 20% (or any other value) for a div inside a parent container is a fundamental HTML/CSS concept, and if that doesn’t work then something is wrong.

The width of my container grid in my browser is 1905px, it is the same as “entry-content” div and “main”, “content-area” and “site-content” divs.

My guess would be that something gets inherited from the parent unsemantic container that messes things up.
20% + 20% + 20% + 20% + 20% must equal 100%, no matter how you look at it, and if it does not, then obviously something is wrong. Fundamental webdesign concepts should not get broken. The laws of mathematics must apply.

[AMBTL]

Perhaps my CSS can be modified/improved to make it work. But I don’t know how…

[AMBTL]

Guys, I think I have solved it myself.
I noticed I left some potentially conflicting CSS inside the Toolset CSS box, so I deleted all css from there and did everything in Customizer.

And also removed all paddings from the cells in CSS (not only in Inspector). And that helped.
At least now I have 5 equal columns, so the maths is correct! 🙂 And they scale down.

Now I have to figure out how to add spacing between them, because adding margins/paddings in the wrong places breaks the whole construction or creates a horizontal scroll bar.

Cheers

[Tom]

Awesome!

Just add an inner element inside the elements with the width, and add padding to that inner element.

[AMBTL]

Yes, that is the way to do it.
This, however causes the spacing between the columns to be twice as wide as the outer space around the grid, which doesn’t look so great.
So I did additionally:
#post-(id-no) .entry-content {padding: 0 10px;}
The grid container itself should not receive any padding/margin at all or it will break.
Now it looks good 🙂

It’s a bit strange that Genesis and Avada didn’t mind the paddings on the columns with width, but in GP I had to remove them and apply it only to the inner divs. Anyway, I prefer to build in GP than in A. or G.

Cheers

[Tom]

It’s likely due to the box-sizing thing I mentioned above.

When it comes to grids, I sometimes like to apply negative margin-left to the grid parent, then padding or margin to the left of the individual grids. This gives you the most consistent spacing.

[Author]

Posts