Responsive Grid layout (Bootstrap?)

Resolved

(@hielkio)

Hi folks,

I hope anyone can help me out here. I’m trying to show a 3 or 4 column grid for pod items, which should be responsive. The default bootstrap grid gives me 1 column. using just CSS with child-nth functionality as below gives me a more proper outcome:

.blog-entry {float:left; width:33.33333%; margin-bottom:1em;}
.blog-entry:nth-of-type(3n+1) {padding-right:1%;}
.blog-entry:nth-of-type(3n+2) {padding:0 .5%;}
.blog-entry:nth-of-type(3n+3) {padding-left:1%;}
.blog-entry img {width:100%; height:auto; margin:0;}
.blog-entry:nth-of-type(3n+4) {clear:left;}

It’s working, but it isn’t responsive. I’d like to prevent using seperate media queries and using Bootstrap instead. Is this possible?

This is the template html code:”

    <div class="blog-entry merken">
        
		<a href="{@website}"><img class="logo" height="80" src="{@logo}" /></a>
		<img class="printerimg" height="80" src="{@printer_afbeelding}" />
		<h2>{@post_title}</h2>
		<strong>Locatie:</strong> {@locatie}<br />
		<!-- <strong>Contact:</strong> {@contact}<br /> -->
		<strong>Website:</strong> <a href="{@website}">{@website}</a><br />
		<strong>E-mail:</strong> <a href="mailto:{@e-mail}">{@e-mail}</a>
		
    </div>

I hope anyone has a clear answer, or maybe solution for me 🙂 thank you very much in advance!

This topic was modified 7 years, 9 months ago by hielkio.
This topic was modified 7 years, 9 months ago by hielkio.

The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Author Jory Hogeveen
(@keraweb)

7 years, 9 months ago
Hi @hielkio,

If you don’t want to work with @media queries I think your only option is to use grid/column classes.
For example: https://getbootstrap.com/docs/4.0/layout/grid/

Keep in mind that your theme needs to support this.

Regards, Jory
- This reply was modified 7 years, 9 months ago by Jory Hogeveen.
Thread Starter hielkio
(@hielkio)

7 years, 9 months ago
Hi Jory,

That’s just what I’m looking for, but I tried that, as I mentioned in my post. The only problem is, that every POD item starts at a new row. My theme supports Bootstrap for sure, because I’m using it all the time 😀

Do I have to place the PODs shortcodes elsewhere maybe? Caus’ it’s using the grid (col-sm-2 and col-sm-10) per POD item. Here’s the backup code of the bootstrap grid:
```
<div class="container">
    <div class="row">
        <div style="height: 120px; display: flex; align-items: center; justify-content: center;" class="col-sm-2">
			<img style="" width="80" src="{@logo}" />
		</div>
		<div class="col-sm-10">
			<h2>{@post_title}</h2>
			<strong>Locatie:</strong> {@locatie}<br />
			<strong>Contact:</strong> {@contact}<br />
			<strong>Website:</strong> <a href="{@website}">{@website}</a><br />
			<strong>E-mail:</strong> <a href="mailto:{@e-mail}">{@e-mail}</a>
		</div>
    </div>
</div>
```
Plugin Contributor Jim True
(@jimtrue)

7 years, 9 months ago

You pretty much are the one defining your output in rows and columns; you have complete control of that. Typically when you’re working with a variable ‘grid’ where you’re not sure how many items you’re going to have, you class the outer container, and then style that container to properly handle the unordered list within.

I also hate to say this, but this isn’t really within the scope of Pods Support as this is CSS Grid, FlexBox, etc styling of your theme output. As long as you can output the content into a way you can style it, you can grid it. When I’ve done these myself, I’ve styled the outer ‘gridbox’ with an unordered list with it’s own class, ie <ul class=”contact-list”> with list items within for the items you’re attempting to grid. Then you just use the nth positioning rules to say I want 3 in a row at this width, 4 in a row at this width, etc. Flexbox and CSSGrid make this easier but they both work in the same way. You identify what is going to be the grid and let it take care of it from there.

You shouldn’t have to use separate media queries, you should inherit those already being used by your theme.

There are lots of resources out there for this outside of WordPress and Pods, including stackexchange.com with folks that work in bootstrap daily.

Thread Starter hielkio
(@hielkio)

7 years, 9 months ago

Thank you very very much Jim!!
It worked like a charm and have a good idea how PODS is built and working overall 🙂
It’s way more easy to use then I expected. What a powerful system! I’m still learning, but I know for sure I never will stop using PODS ever! You’re totally right about the fact my question belongs somewhere else. I just couldn’t figure out how the seperate items would be called. So we can conclude that the problem lay between my keyboard and chair 😉

Plugin Contributor Jim True
(@jimtrue)

7 years, 9 months ago

Not at all. I still have issues with CSS, but for me it really helped to think about content semantically in regards to HTML5. Once I did that, I added a lot less div’s and span’s and really started getting clean in my HTML. That helped my Google SEO as well and my CSS really was only about display then.

I’m trying to think of the online tutorial or class that helped me, but, I think it was a bunch of them. The ones at CodeSchool (Now, Pluralsight.com) are awesome, though.