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

This code worked great for me, but for some reason the arrow color has turned blue. It looks black (which is what I prefer) in the squarespace editor but blue when viewing on mobile (see image attached). 
Link: www.raehcollection.com

Any thoughts?

I tried this code to change the color but it doesn't seem to work:

@media screen and (max-width:767px) {
svg.user-items-list-carousel__arrow-icon-path{
  stroke: black !important;
}}

On 4/28/2024 at 6:42 AM, afs242 said:

This code worked great for me, but for some reason the arrow color has turned blue. It looks black (which is what I prefer) in the squarespace editor but blue when viewing on mobile (see image attached). 
Link: www.raehcollection.com

Any thoughts?

I tried this code to change the color but it doesn't seem to work:

@media screen and (max-width:767px) {
svg.user-items-list-carousel__arrow-icon-path{
  stroke: black !important;
}}

Try this code to Custom CSS box

button[class*="_arrow-button--right"] div:before, .mobile-arrow-button--right:before, button[class*="_arrow-button--left"] div:before, .mobile-arrow-button--left:before {
    color: #000 !important;
}

Thank you for responding tuan.  That worked! You're always so amazing with your knowledge. Funny enough, I just sat down before you responded to fiddle with it some more and got it to work with this code as well:

.user-items-list-carousel__arrow-button{
 color: #000000 !important;
}

Hello I've got the same problem.  The carousel works really well in the desktop version but on mobile the arrows are below the content and not visible.  I'd like to move the arrows to be in between the photos and the copy.  Ideally overlapping the photos.

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.

On 5/5/2024 at 10:14 AM, bridoo said:

Hello I've got the same problem.  The carousel works really well in the desktop version but on mobile the arrows are below the content and not visible.  I'd like to move the arrows to be in between the photos and the copy.  Ideally overlapping the photos.

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.

Add to Custom CSS code

@media screen and (max-width:767px) {
	[class*="desktop-arrow"] {
		display: flex !important;
}
[class*="mobile-arrow"] {
display: none !important;
}
}