Hide pagination parent container when loop pagination is not present

Scribble
June 25, 2026 at 2:05 am

Hello,
I’m using a Loop Template element to manage the archive page for a custom post type.

The element consists of:
– a query loop
– pagination

The pagination buttons/numbers are placed inside a container that has padding applied to it:

Because of the container’s padding, a blank white area appears at the bottom of the page even when there are not enough posts to trigger pagination:

I was wondering: is there a way to automatically hide the parent container when the pagination itself is not present?

I would like to achieve a result like this:

Thank you!
George
June 25, 2026 at 2:20 am
Hi,

Yes, you can hide the parent container automatically with CSS that checks whether pagination links are actually present.

Add this to your CSS, replacing the selector with the class on the container that wraps your pagination block:
```
.your-pagination-container:not(:has(.page-numbers)) {
    display: none;
}
```
This hides the container unless it contains real pagination links (.page-numbers anchors), so the padding-induced white space only appears when pagination is genuinely needed.

To find the correct wrapper class, inspect the pagination container in your browser’s DevTools and use whichever class has the padding applied or add your own class for the pagination container.
Scribble
June 25, 2026 at 7:08 am

Works perfectly!
Thank you
George
June 25, 2026 at 7:09 am

No problem!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.