Product navigation arrows not visible in desktop

Add this to Home > Design > Custom CSS

/* Product slide arrows control */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls {
    display: flex !important;
}
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: white;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
}
}

I also used the code above that @tuanphan posted and was able to make it work for me (thank you!) 

However, I was having trouble with my mobile site and the arrows were showing up as white blocks instead of arrows. I'm sure this is due to the design of my template. But I just had to change the word 'white' to 'transparent' and it works perfectly now! 

Thanks so much for some great code, dude! Helping this newb make her site function.