A user needed to remove navigation arrows from product pages on the Focal theme while keeping the navigation dots visible on mobile devices.
Initial Solution:
.product__media-nav element, which removed both arrows and dots.Final Solution:
.product__media-prev-next) while preserving the navigation dots.assets/base.css with mobile-specific media query (max-width: 767px).Status: Resolved. The user confirmed the solution worked as intended.
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;
}
}
