Product archive page numbering

[Thierry]

Hi Rui, Ed and David,

Hope you’re doing well.

My client has got a question regarding the page numbering on mobile devices. She’s given feedback on it, announcing here disapproval of it continuing on a new line.

I’ll attach a screenshot. Could you help me write some lines of code to make it shorter on smaller viewports?

Thanks guys.

Yours,
Thierry

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi Thierry,

You could use some CSS and a media query to target the pagination and reduce the size/padding/margins.

Here is an example, please add this to Theme Options => Custom CSS:

.woocommerce nav.woocommerce-pagination ul {
    width: 100%;
    margin-bottom: 15px !important;
}
.woocommerce-page nav.woocommerce-pagination ul li {
   margin-left: 5px; 
}
.woocommerce-page nav.woocommerce-pagination ul li span {
    padding: 4px;
    font-size: 13px;
    width: 35px;
    height: 35px;
}
.woocommerce nav.woocommerce-pagination ul li a {
    line-height: 16px;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
    line-height: 22px;
}

[Thierry]

Thanks David. It’s not quite exactly what we were looking for, but it’s a help anyway. I’m really thankful for your valuable support on several code issues and several customization requests so far. You guys rock!

[David Martin – Support]

Glad to help you out! Do let me know if you require any extra help.

If you have found the theme/support useful, we appreciate it if you can leave feedback on our item if you have the time as it really helps us out.

Thanks,
David