Align Pagination Buttons on Mobile Blog

Is there a way I can adjust the placement of the pagination buttons on a blog post for mobile viewing? I would like the previous and next buttons to be at the same height. 

hiya i'm having this issue too! need some advice on this

same height or same line?

Hey! Either is fine I think? I just want them at the same height for aesthetic reasons on mobile, on desktop it’s fine

thank you so much 

Can you share link to blog post? We can check easier.

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!

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;
}

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!!