Solved - Styling paged content

Loops & Logic
#1

I spent a lot of time trying to figure this out, so I’m posting it for the benefit of anyone else.

For an unpaginated grid layout with two columns, I wrap my items in a container like this:

<div class="container">
   <Loop type="dogs">
      items i want to see
 </Loop>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  grid-gap: 40px;
}

But you only get one column if you paginate the loop by adding, say: paged=4

That’s because L&L adds a <div> with a class of tangible-paginator-target. Therefore your items are no longer directly inside <div class="container">

EDIT:
If you target .tangible-paginator-target by itself, you run the risk of affecting other loops.

So make sure .container is unique, then target your CSS like this:

.container .tangible-paginator-target {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  grid-gap: 40px;
}

Cheers, Richard

3 Likes
#2

@RichardC, thanks for the tip. I just ran into the same issue and would have had trouble figuring this out. :slight_smile:

1 Like
#3

Thanks. I also just made an edit (above) after discovering my CSS was affecting other loops.

1 Like