adding arrow opacity of 40% onto mobile page
Can anyone help me add this arrow on my mobile page so customer know to scroll right 🙂
password:enzo
BEFORE
AFTER
You can do that by adding this code to theme.liquid file, after <head> in Online Store > Themes > Edit code
<style>
@media (max-width: 749px) {
.floating-controls-container { position: relative; }
.floating-controls-container>.floating-controls-container__control {
display: block !important;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: 100;
opacity: 0.4;
}
carousel-prev-button.floating-controls-container__control {
left: 32px;
}
carousel-next-button.floating-controls-container__control {
right: -16px;
}
}
</style>
You can do that by adding this code to theme.liquid file, after <head> in Online Store > Themes > Edit code
<style>
@media (max-width: 749px) {
.floating-controls-container { position: relative; }
.floating-controls-container>.floating-controls-container__control {
display: block !important;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: 100;
opacity: 0.4;
}
carousel-prev-button.floating-controls-container__control {
left: 32px;
}
carousel-next-button.floating-controls-container__control {
right: -16px;
}
}
</style>
Community Blog Articles
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024