Adjust item pagination text size for mobile

Hey all,

I want to use custom css to change some display on my website for the item pagination. On PC they appear just fine, but on mobile the text becomes too large and overlaps. If I make the text smaller, it will appear fine on mobile but it will appear too small on PC.

I'd like to change the size for mobile display using custom css. I've already done a bit of researching/experimenting to get it done, but I don't think I've got enough knowledge of CSS to be able to complete it.

My main problem is not knowing how to target the right element on the site to change the style. I've got multiple sections where the item pagination is used, and preferrably I'd like to apply this change to all of them at once, instead of targetting each element by it's unique ID.

I tried doing so with the following CSS, but it did not provide any results:

@media screen and (max-width: 640px) {
section.itemPagination h3 {
    font-size: 0.8rem;
}
}

If someone could tell me the right way to target these elements, that would be much appreciated 🙂

Can you share your website URL?

https://roadrunner-cod-3bzx.squarespace.com/

I thought that by filling in the URL field it would automatically display in the post. Apparently it doesn't, otherwise I would've added it in the post.

13 minutes ago, Pizzanakin said:

I thought that by filling in the URL field it would automatically display in the post. Apparently it doesn't, otherwise I would've added it in the post.

I realize that, the process is very unclear, but thanks for sharing, and nice job getting it working!

On 4/6/2023 at 1:02 PM, Pizzanakin said:

Oh, I just managed to solve it after doing some more experimenting!

For anyone else stumbling upon the same problem, here's how I fixed it:

@media screen and (max-width: 640px) {
h2.item-pagination-title.preFade.fadeIn {
    font-size: 0.8rem;
}
}

I got this 'tag' by simply hovering over the html after doing inspect element on my page. This tag appeared over the box in the page display, and I figured I would try this tag. It worked!

Hello. Where do you insert this CSS?

On 5/20/2023 at 1:32 PM, hemda said:

Hello. Where do you insert this CSS?

Home > Design > Custom CSS