Topic: Page Number Styling Issue

Odin

September 3, 2024 at 7:22 am

I have used the following code to style the page numbers in my blog page:

/* Pagination Container */
.nav-links {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    margin: 0;
    list-style: none;
}

/* Individual Page Numbers */
.nav-links .page-numbers {
    display: inline-block;
    margin: 0 5px;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: #333;
    background-color: #f4f4f4;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    transition: all 0.3s ease;
}

/* Active Page Number */
.nav-links .page-numbers.current {
    color: #fff;
    background-color: #b02fec;
    border-color: #b02fec;
}

/* Hover State */
.nav-links .page-numbers:hover {
    color: #fff;
    background-color: #b02fec;
    border-color: #b02fec;
}

/* Next/Prev Buttons */
.nav-links .page-numbers.prev,
.nav-links .page-numbers.next {
    display: inline-block;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: #333;
    background-color: #f4f4f4;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
}

.nav-links .page-numbers.prev:hover,
.nav-links .page-numbers.next:hover {
    color: #fff;
    background-color: #b02fec;
    border-color: #b02fec;
}

/* Disable next/prev button when not active */
.nav-links .page-numbers.prev.disabled,
.nav-links .page-numbers.next.disabled {
    pointer-events: none;
    color: #999;
    background-color: #f4f4f4;
    border-color: #e1e1e1;
}

#right-sidebar .inside-right-sidebar a {
   color: black;
}

I have generated this CSS with ChatGPT.

Unfortunately, in the mobile view, the buttons are getting stretched vertically when I click Page Number 2.
https://imgur.com/4iG4TRE

Is it possible to remove the button labels and only keep the arrows in mobile view?

Thank you in advance for your help.

Ying

September 3, 2024 at 10:08 am

Hi there,

Try adding this CSS:

@media(max-width: 768px) { 
.nav-links :is(.page-numbers.next,.page-numbers.prev) {
    font-size: 0;
}

.nav-links :is(.page-numbers.next, .page-numbers.prev) span {
    font-size: 14px;
}
}

Odin
September 3, 2024 at 10:31 am

Thank you Ying for the code. It looks amazing now.

Can you please tell me how I can reduce the top margin of the pagination section?

This is what I am referring to:
https://imgur.com/aXrDoeP
Ying
September 3, 2024 at 11:02 am
The container in the block element – content template has a 30px bottom padding, you can remove that padding, but it will affect all posts.

And this CSS adding 20px padding-top and padding-bottom to the nav links, you can remove the padding: 20px 0; from it.
```
/* Pagination Container */
.nav-links {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    margin: 0;
    list-style: none;
}
```

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

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Page Number Styling Issue