How can I adjust the size and position of arrows in Craft Theme's featured collection?

Store Design
1

I want to move the two super small arrows (RED) to be one on each side. preferably larger so it is easy for the user to see and navigate. What code do I need for this?

Website: https://www.galacticfederationoflight.com/

Oliverraahauge_0-1663942074280.png
Oliverraahauge_0-1663942074280.png1920Ă—976 148 KB

1 Like
2

@Oliverraahauge

yes please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
.collection .slider-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
}
.collection button.slider-button.slider-button--prev {
    left: 0;
}
.collection button.slider-button.slider-button--next {
    right: 0;
}
3

Hi @Oliverraahauge

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

-Go to Online Store->Theme->Edit code

-Asset-> base.css paste the below code at the bottom of the file.

.section-template–14787300524074__16613559353a0ad4c4-padding .slider-button {

position: absolute;

top: 50%;

transform: translateY(-50%);

background: #fff;

Z-index:999 !important

}

.section-template–14787300524074__16613559353a0ad4c4-padding button.slider-button.slider-button–prev {

left: 0;

}

.section-template–14787300524074__16613559353a0ad4c4-padding button.slider-button.slider-button–next {

right: 0;

}

Best Regards;

PageFly