Move portfolio pagination above or to the side of content

Site URL: https://parsnip-emu-fs7r.squarespace.com/paintings/winter-bush-and-snowdrift

Hello,

I would like to move the portfolio pagination that is currently way at the bottom of the page (and impossible to find for most visitors to the site) up to the top, or ideally, I would simply like to have scrolling arrows (with no titles) at the side of the portfolio images so that one can easily click through items. How can I accomplish this? 

Thank you.

On 4/27/2022 at 12:06 AM, BBmt said:

Site URL: https://parsnip-emu-fs7r.squarespace.com/paintings/winter-bush-and-snowdrift

Hello,

I would like to move the portfolio pagination that is currently way at the bottom of the page (and impossible to find for most visitors to the site) up to the top, or ideally, I would simply like to have scrolling arrows (with no titles) at the side of the portfolio images so that one can easily click through items. How can I accomplish this? 

Thank you.

Hi,

Add to Design > Custom CSS

/* Move portfolio pagination to top */
body.collection-62129c560e6b7b087d32985f.view-item main#page {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    padding-top: 100px;
}
  body.collection-62129c560e6b7b087d32985f.view-item section.item-pagination.item-pagination--prev-next {
    padding-top: 0;
    padding-bottom: 5px;
}
  body.collection-62129c560e6b7b087d32985f.view-item #page section:first-child {
    padding-top: 10px !important;
}

Thank you so much, that worked perfectly!

For some reason this didn't work for my site. Any chance you'd be able to give it a look?

URL: https://www.dbender-creative.com/workplace/research

@tuanphan - I've got another one I could use your help with if you've got the time. 🙂

On 5/25/2023 at 12:43 AM, BenderDC said:

For some reason this didn't work for my site. Any chance you'd be able to give it a look?

URL: https://www.dbender-creative.com/workplace/research

Use this new code for your site

/* Move portfolio pagination to top */
body.collection-644979913ea68148e08f8156.view-item main#page {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    padding-top: 100px;
}
  body.collection-644979913ea68148e08f8156.view-item section.item-pagination.item-pagination--prev-next {
    padding-top: 20px;
    padding-bottom: 5px;
}
  body.collection-644979913ea68148e08f8156.view-item #page section:first-child {
    padding-top: 10px !important;
}

Thank you! It worked! Which has now led me to a couple new questions.

1) Is there code I can add to alter the spacing above the pagination for mobile and desktop separately? I tried duplicating this and putting @media only screen and (max-width: 640px) and adjusting for mobile, then adding @media only screen and (min-width: 950px) and adjusting padding for desktop, but the mobile wouldn't change.

2) Is there a way to set a max width for the words in the pagination titles to have them push the next line? They sometimes look a little wonky when the left and the right are significantly different in length. A different idea would be to have them not center vertically but to be top aligned so there's some visual consistency.

Actually, my ideal would be to move the pagination below the section header description (see image). If that's possible, then I don't think I'll need answers to the above to questions.

On 6/3/2023 at 1:42 AM, BenderDC said:

Actually, my ideal would be to move the pagination below the section header description (see image). If that's possible, then I don't think I'll need answers to the above to questions.

I think we will need to use jQuery to move to this position. Do you use Personal or Business Plan?

i'm trying to do the same @tuanphan but above code isn't working for me 🙂

7.1 fluid engine, portfolio sub pages

www.moonlitdesign.uk/portfolio-1/fortheloved-photography

On 4/9/2024 at 7:58 PM, moonlitdesign said:

i'm trying to do the same @tuanphan but above code isn't working for me 🙂

 

7.1 fluid engine, portfolio sub pages

 

www.moonlitdesign.uk/portfolio-1/fortheloved-photography

The page doesn't work

On 4/13/2024 at 8:59 AM, tuanphan said:

The page doesn't work

www.moonlitdesign.uk/portfolio/fortheloved-photography

On 4/14/2024 at 11:26 PM, moonlitdesign said:

www.moonlitdesign.uk/portfolio/fortheloved-photography

Use this CSS code to CUstom CSS box

/* Move portfolio pagination to top */
body.collection-66056e10c29b080d49c9baed.view-item main#page {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    padding-top: 100px;
}
  body.collection-66056e10c29b080d49c9baed.view-item section.item-pagination.item-pagination--prev-next {
    padding-top: 0;
    padding-bottom: 5px;
}
  body.collection-66056e10c29b080d49c9baed.view-item #page section:first-child {
    padding-top: 10px !important;
}