Move Carousel Section Arrows on Mobile to Sides

How can I move the Carousel Section Arrows on mobile to the center similar to how it is on desktop? Right now on mobile, the arrows sit under the images.

Hi,

Can you share link to page where you use Carousel? We can check easier

On 1/28/2023 at 3:42 AM, tuanphan said:

Hi,

Can you share link to page where you use Carousel? We can check easier

https://www.annie-yang.com/misc-projects

This is the link to the page!

On 1/31/2023 at 12:43 AM, Anniiey1 said:

 

https://www.annie-yang.com/misc-projects

 

This is the link to the page!

Add to Design > Custom CSS

@media screen and (max-width:767px) {
body#collection-63d2ae161cc44a2aa6881b2c {
.desktop-arrows.user-items-list-carousel__arrow-wrapper {
    display: flex !important;
}
.mobile-arrows {
    display: none !important;
}
}}

10 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
body#collection-63d2ae161cc44a2aa6881b2c {
.desktop-arrows.user-items-list-carousel__arrow-wrapper {
    display: flex !important;
}
.mobile-arrows {
    display: none !important;
}
}}

 

I added this, but now the arrows are overlapping either side of the images instead of being on the border. Can we fix this somehow? Thank you!

On 2/3/2023 at 6:02 AM, Anniiey1 said:

I added this, but now the arrows are overlapping either side of the images instead of being on the border. Can we fix this somehow? Thank you!

Use this new code

@media screen and (max-width:767px) {
body#collection-63d2ae161cc44a2aa6881b2c {
.desktop-arrows.user-items-list-carousel__arrow-wrapper {
    display: flex !important;
}
.mobile-arrows {
    display: none !important;
}
button.user-items-list-carousel__arrow-button.user-items-list-carousel__arrow-button--left {
    position: relative;
    left: -15px;
}
button.user-items-list-carousel__arrow-button.user-items-list-carousel__arrow-button--right {
    position: relative;
    right: -15px;
}
}}

Thank you, it still didn't solve the problem. I just removed them instead. Wish there were alternate arrows that didn't take up so much space. 

On 2/13/2023 at 2:46 AM, Anniiey1 said:

Thank you, it still didn't solve the problem. I just removed them instead. Wish there were alternate arrows that didn't take up so much space. 

The code is fine to me. Can you add & keep the code? We can check easier