Jump to content

Adjust item pagination text size for mobile

Go to solution Solved by Pizzanakin,

Recommended Posts

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 🙂

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

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!

Link to comment
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!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 1 month later...
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?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.