URL: https://marking-printing-6698.myshopify.com/
How can I hide this whole part of the slider in mobile interface? Thank you.
My theme is “Sense”
Topic summary
A user seeks to hide slider navigation buttons on mobile devices for their Shopify store using the “Sense” theme.
Solution Provided:
A PageFly support representative offers CSS code to hide the buttons:
- Navigate to: Online Store → Theme → Edit code
- Locate the
base.cssfile - Add media query CSS at the bottom targeting screens with max-width 767px
- The code uses
display: none !importanton slider control button classes - Save the file
Technical Details:
- Uses a mobile-specific media query (
@media screen and (max-width: 767px)) - Targets slider control button elements with specific class selectors
- Applies
!importantflag to ensure style override
Status: Solution provided, awaiting user confirmation if it resolves the issue.
This is Victor from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
@media screen and (max-width: 767px){
.slideshow__controls.slideshow__controls–top.slider-buttons.no-js-hidden {
display: none !important;
}
}
Hope that my solution works for you.
Best regards,
Victor | PageFly
1 Like