alignment ******Blog Pagination PREVIOUS and NEXT button is not aligned straight on mobile.

I tried many attempts to have the previous and the next button straight. Currently the PREVIOUS button is above the NEXT button.  I tried adjusting the line height to zero in site style but it's still not aligned. It would be greatly appreciated if anybody knows how to solve this and makes them straight. 

Link is https://www.lexta.co/lookbook/boon-sofa-ideas-1

There's the same question being asked and answered in this thread, which will hopefully help you out:

Try adding this to Design > Custom CSS

@media screen and (max-width:640px) {
nav.BlogItem-pagination.clear {
    display: flex;
    justify-content: space-between;
}
nav.BlogItem-pagination.clear:after {
    display: none;
}
}

On 9/22/2022 at 5:31 PM, tuanphan said:

Try adding this to Design > Custom CSS

@media screen and (max-width:640px) {
nav.BlogItem-pagination.clear {
    display: flex;
    justify-content: space-between;
}
nav.BlogItem-pagination.clear:after {
    display: none;
}
}

 

It worked perfectly. Thank you so much for help. I really appreciated.

On 9/21/2022 at 3:46 PM, Ziggy said:

There's the same question being asked and answered in this thread, which will hopefully help you out:

 

Thank you for sharing, I have seen that thread but the codes only helped that specific site. Tuanphan have solved my problem and it works perfectly now. 

This isn't doing the trick for me. Any idea how to align the old and new blog post buttons, @tuanphan?

https://mushroom-greyhound-d7ly.squarespace.com/recipes (pw: brimley)

I do have some code to customize the buttons - maybe that is getting in the way?

On 8/29/2024 at 3:43 AM, zooeythecat said:

This isn't doing the trick for me. Any idea how to align the old and new blog post buttons, @tuanphan?

https://mushroom-greyhound-d7ly.squarespace.com/recipes (pw: brimley)

I do have some code to customize the buttons - maybe that is getting in the way?

Left you use :before

Right you use :after

Right >> you can change it to :before

You will have this

Next, use this CSS code to fix left button overflow screen

@media screen and (max-width:767px) {
nav.blog-list-pagination .prev-label:before, nav.blog-list-pagination .next-label:before {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -30px;
}
nav.blog-list-pagination .prev-label, nav.blog-list-pagination .next-label {
    position: relative;
    width: calc(~"100% - 20px");
}
}

@tuanphan - Thanks so much--this worked great on mobile. However, now on desktop, the right nav (Older Posts) has extra spacing on the right. Any idea how we can fix?

 https://mushroom-greyhound-d7ly.squarespace.com/recipes?offset=1724787188246

On 9/1/2024 at 5:58 PM, tuanphan said:

Left you use :before

Right you use :after

Right >> you can change it to :before

You will have this

Next, use this CSS code to fix left button overflow screen

@media screen and (max-width:767px) {
nav.blog-list-pagination .prev-label:before, nav.blog-list-pagination .next-label:before {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -30px;
}
nav.blog-list-pagination .prev-label, nav.blog-list-pagination .next-label {
    position: relative;
    width: calc(~"100% - 20px");
}
}

 

Can you remove this change? I will write new code to exclude new change on desktop