Display pagination in the Photo Gallery Columns layout lower

Ask the Community Customization
1

Hey Max!! is there a code for this but for the “columns” layout?? I am wanting to place the arrows completely beneath the images, i do not want them on the side (overflow)

1 Like
3

Hi there @Quilla :wave:

Could you please send me a link to the page where your widget is installed, or just specify the name of your Photo Gallery widget?

4

Hiya @Max! sorry for the late reply! Absolutely! So the name of my widget is “Landing Page Displayed Works”.

I am hoping to have that pagination drop underneath where they are currently, so they are entirely below the images.

1 Like
5

Thank you!

To move arrows under the images, please use this code in the Custom CSS field on the Style tab of your widget’s settings:

[aria-label="Previous"], [aria-label="Next"]{
  top: 87%;
}

@media(max-width: 500px) {
  [aria-label="Previous"], [aria-label="Next"]{
    top: 87%;
  }
}

If you want to center them, feel free to add this code too:

[aria-label="Previous"] {
  left: calc(50% - 50px);
}

[aria-label="Next"] {
  right: calc(50% - 50px);
}

image
image1820×929 85.1 KB

6

Yesss thank you so much @Max! This worked like a charm!!!

2 Likes
7

Hey @Max last question for ya! Is there a way to get rid of the circular container and shadow so all you have is just the < >? Is there also a way to maybe change this to a different style of arrow or even make it larger in size?

1 Like
8

@Quilla I see that you’ve hidden the left arrow. Do you want to hide the background and increase size only for the right arrow?

9

Hiya Max! Could you give me the code to get rid of both? on mobile i have both arrows visible :slight_smile:

10

Hey Francesca! These are the codes our devs have cooked for you, let me know if they worked :slight_smile:

To remove the background and shadow:

[class*="ArrowControl__ArrowControlContainer-sc"],
[class*="ArrowControl__ArrowControlContainer-sc"]:hover {
  box-shadow: none !important;
  background-color: transparent !important;
}

To change the arrows’ size:

[class*="ArrowControl__ArrowControlContainer-sc"]
[class*="ArrowControl__ArrowControlIcon-sc-"],
[class*="ArrowControl__ArrowControlContainer-sc"]
[class*="ArrowControl__ArrowControlIcon-sc-"] svg {
  width: 30px;
  height: 30px;
}
1 Like
11

@Helga and @Max ya’ll are the absolute best! thank you!!

2 Likes