Adjusting the arrow control on the 360 degree view

1) Is there a way to adjust, move or make smaller the arrows that show up at the bottom of a 360 degree view photo?
2) Can I make the 360 degree arrows smaller on the mobile version?

How are they controlled?

Attachments:

You must be logged in to view attached files.

Hello,

The below code will help to make those arrows smaller, please enter the code into the “Global Custom CSS” or “Mobile CSS” area in Theme Settings -> Custom CSS.

.home .wd-threed-view .nav_bar_previous,
.home .wd-threed-view .nav_bar_next {
    width: 32px !important;
    height: 32px !important;
    
    justify-content: center;
    display: flex !important;
    align-items: center;

}

.home .wd-threed-view .nav_bar {
    display: flex;
}

Kind Regards

I added it to the CSS and it changed the size of the arrows on desktop which is fine, but it did not changed it on mobile. How do I change them on mobile?

Hello,

In general, you need to set the same code to the “Mobile CSS” area, just with smaller values.

Let me know if it doesn’t help you.

Kind Regards

The code worked on the home page, but I also want to adjust, move or make smaller the arrows that show up at the bottom of a 360 degree view photo on the product pages for all three: desktop, tablet and mobile.

Attachments:

You must be logged in to view attached files.

Hello,

You can use the same code, just instead of .home use the .single-product selector.

Thank you for your time nad have a good day!

Kind Regards

[Author]

Posts