Jump to content

Align Pagination Buttons on Mobile Blog

Recommended Posts

  • 2 months later...
  • Replies 7
  • Views 1.4k
  • Created
  • Last Reply
  • 10 months later...
On 5/27/2021 at 4:20 AM, JanuaryMade said:

Did anyone get an answer to this question? I'd love some help please @tuanphan🙂

Blog is https://www.lucazarikfilms.com.au/wedding-films/alexandra-pat-lindenderry-red-hill (pw ZARIK2021)

Just want the pagination to align across the bottom in a straight line (shown in red), currently 'previous' is further up and 'next' is further down.

 

Thanks so much!

First, in Custom CSS, find & remove this code

.item-pagination-link--prev.item-pagination-link .item-pagination-title:before {
    visibility: visible !important;
    content: "Previous" !important;
}
.item-pagination-link--next.item-pagination-link .item-pagination-title:after {
    visibility: visible !important;
    content: "Next" !important;
}

Next, add this code

/* add previous next */
body[class*="collection-type-blog"] .item-pagination-title {
    display: none;
}
body[class*="collection-type-blog"] .item-pagination-link--prev .item-pagination-prev-next {
    display: block;
    text-transform: uppercase;
	letter-spacing: 2px;
}
body[class*="collection-type-blog"] .item-pagination-link--next .item-pagination-prev-next {
    display: block;
    text-transform: uppercase;
	letter-spacing: 2px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
19 hours ago, tuanphan said:

First, in Custom CSS, find & remove this code


.item-pagination-link--prev.item-pagination-link .item-pagination-title:before {
    visibility: visible !important;
    content: "Previous" !important;
}
.item-pagination-link--next.item-pagination-link .item-pagination-title:after {
    visibility: visible !important;
    content: "Next" !important;
}

Next, add this code


/* add previous next */
body[class*="collection-type-blog"] .item-pagination-title {
    display: none;
}
body[class*="collection-type-blog"] .item-pagination-link--prev .item-pagination-prev-next {
    display: block;
    text-transform: uppercase;
	letter-spacing: 2px;
}
body[class*="collection-type-blog"] .item-pagination-link--next .item-pagination-prev-next {
    display: block;
    text-transform: uppercase;
	letter-spacing: 2px;
}

 

@tuanphan you are the best thank you!!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.