Hey, Im using the image gallery module and setting the "controls" to "Nex/Prev arrows overlaid" which works great on desktop but nothing shows for mobile?
Its impossible to know on a mobile that you can scroll through the gallery so its bad from a UI/UX perspective.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 999px) {
.nectar-flickity[data-controls*=arrows_overlaid][data-overflow=visible] .flickity-prev-next-button {
opacity: 1 !important;
visibility: visible !important;
pointer-events: all !important;
}
}
The only mising thing is that the arrows need to be vertially center aligned. currently they appear to be 40% from the bottom of the image and not center aligned
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 690px){
.nectar-flickity[data-controls*=arrows_overlaid] .flickity-prev-next-button {
-webkit-transform: translateY(-50%) !important;
-ms-transform: translateY(-50%) !important;
transform: translateY(-50%) !important;
}
}
Hey, Im using the image gallery module and setting the "controls" to "Nex/Prev arrows overlaid" which works great on desktop but nothing shows for mobile?
Its impossible to know on a mobile that you can scroll through the gallery so its bad from a UI/UX perspective.
Is there any fix for this at all for mobile?
Thanks
Damien
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 999px) { .nectar-flickity[data-controls*=arrows_overlaid][data-overflow=visible] .flickity-prev-next-button { opacity: 1 !important; visibility: visible !important; pointer-events: all !important; } }Thanks
ThemeNectar Support Team
Brilliant, thankyou Tahir.
The only mising thing is that the arrows need to be vertially center aligned. currently they appear to be 40% from the bottom of the image and not center aligned
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 690px){ .nectar-flickity[data-controls*=arrows_overlaid] .flickity-prev-next-button { -webkit-transform: translateY(-50%) !important; -ms-transform: translateY(-50%) !important; transform: translateY(-50%) !important; } }Thanks
ThemeNectar Support Team
brilliant, thakyou