Remove nav arrows from product page - Focal Theme

[galleriste]

How do I remove these arrows? 

Here is the site: https://568839.myshopify.com/

[devcoders]

Hello @galleriste 

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.

@media screen and (max-width: 767px) {
.product__media-nav {
display: none;
}
}

[galleriste]

This also removed the navigation dots. I only want the arrows gone

[devcoders · Accepted solution]

Hello @galleriste 

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.

@media screen and (max-width: 767px) {
flickity-controls.product__media-nav {
    justify-content: center;
}
.product__media-prev-next.hidden-lap-and-up.tap-area.tap-area--large {
    display: none;
}
.product__media-prev-next.hidden-lap-and-up.tap-area.tap-aera--large {
    display: none;
}
}

[galleriste]

Thanks!

[devcoders]

Hello @galleriste 

You're very welcome! I'm glad to hear that you're pleased with the outcome. Please feel free to reach out if you need further assistance.

If my assistance was helpful, please consider liking and accepting the solution. Thank you!