On my homepage my flickity buttons for featured collections go off the page. Does anyone know how to stop this from happening as it’s messing up the homepage going off screen. It’s the same for all three featured collections on the homepage. See here:
Topic summary
Issue: Navigation arrows in a Flickity (carousel/slider) on the homepage’s featured collections were rendering off-screen, affecting layout across all three carousels. Screenshots and site link were provided.
Fix implemented: Added CSS in theme.css using a media query for wide screens (min-width: 1510px) to reposition the arrows:
- .featured-collection__content .flickity-button.previous { left: -20px }
- .featured-collection__content .flickity-button.next { right: -20px }
The change was confirmed to resolve the issue.
Follow-up request: Make product/info boxes wider on mobile so descriptions are easier to read (screenshot provided). Response advised keeping the current, device-optimized layout and did not provide a modification.
Status:
- Primary issue (off-screen Flickity buttons) resolved.
- Secondary request (wider mobile boxes) not actioned; effectively declined with a recommendation to leave as-is.
Notes: Images were central to understanding both the initial display issue and the mobile layout concern.
sorry for that
can you please try this code
- Go to Online Store->Theme->Edit code
- Asset->/theme.css ->paste below code at the bottom of the file.
@media screen and (min-width: 1510px) {
.featured-collection__content .flickity-button.previous { left: -20px ; }
.featured-collection__content .flickity-button.next { right: -20px ; }
}
Thank you for that! Really appreciate it all fully working now.
Joshua.
1 Like
its my pleasure to help us
Do you know how i can make the boxes wider on mobile so that the description can be read easier?
It’s these boxes:
1 Like
that was proper proposal as per device don’t any change it work perfect