Image of product variation swatches at mobile version
-
Hello, in mobile devices the image swatches cover the product. I dont want that. In the Hover on product I use the one with excerpt.
Attachments:
You must be
logged in to view attached files.
Hello,
Please consider changing the design of hover on product effect.
HTML structure does not allow solving it by custom CSS. Such modification requires complicated code customization which is not covered by our support.
Best Regards
Hello,
Changing the design of hover on product effect is not an option. Please give me an alternative to this.
Hello,
Please add this code to the Theme Settings > Custom CSS > Mobile:
body .basel-hover-excerpt .swatches-on-grid {
display: flex;
overflow-x: auto;
padding-top: 5px;
padding-bottom: 5px;
-webkit-mask-image: linear-gradient(to left, transparent, black 40px);
mask-image: linear-gradient(to left, transparent, black 40px);
}
body .basel-hover-excerpt .swatches-on-grid .swatch-on-grid:last-child {
z-index: 5;
position: relative;
}
body .basel-hover-excerpt .swatches-on-grid .swatch-on-grid:last-child:after {
content: "";
height: 25px;
width: 40px;
display: block;
opacity: 0;
z-index: -1;
position: relative;
}
body .swatches-on-grid .swatch-on-grid.swatch-size-large {
min-width: 25px;
height: 25px;
width: 25px;
}
Best Regards
.
