Blog issues - switching 'prev' and 'next' with CSS

Site URL: https://bowiebybicycle.com/bowie-blog/bowies-barcelona

Hey there, 

My squarespace blog pagination displays back to front, so if you click on 'previous' it takes you to a NEW post and if you click on 'next' it takes you to an older post. Is there anyway to switch this around?

Thanks so much in advance!

On 6/24/2021 at 3:53 PM, JB21 said:

Site URL: https://bowiebybicycle.com/bowie-blog/bowies-barcelona

Hey there, 

My squarespace blog pagination displays back to front, so if you click on 'previous' it takes you to a NEW post and if you click on 'next' it takes you to an older post. Is there anyway to switch this around?

 

Thanks so much in advance!

like this?

.BlogItem-pagination {
  display: flex;
}
.BlogItem-pagination-link--prev {
  text-align: right;
  order: 2;
}
.BlogItem-pagination-link--next {
  text-align: left;
  order: 1;
}
.BlogItem-pagination-link--prev .BlogItem-pagination-link-label,
.BlogItem-pagination-link--next .BlogItem-pagination-link-label {
  visibility: hidden;
  position: relative;
}
.BlogItem-pagination-link--prev .BlogItem-pagination-link-label:before {
  visibility: visible;
  content: "Next";
  position: absolute;
  right: 0;
}
.BlogItem-pagination-link--next .BlogItem-pagination-link-label:before {
  visibility: visible;
  content: "Previous";
  position: absolute;
  left: 0;
}

Amazing, that works! Thanks so much @bangank36

@JB21Found these on your site. Do you need fix?

Site URL – https://bowiebybicycle.com/

1. (All devices – bowie blog) Dates are not aligned

https://bowiebybicycle.com/bowie-blog

2. (All devices – bowies barcelona) Dates are not aligned

https://bowiebybicycle.com/bowie-blog/bowies-barcelona

3. (Desktop – Homepage) The background image and text are the same color, so the text can’t be read in some places

https://bowiebybicycle.com/

4. (Tablet – Header) header is divided into 2 rows

https://bowiebybicycle.com/