Home Forums Basel support forum Image of product variation swatches at mobile version

Image of product variation swatches at mobile version

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #139230

    baselalova
    Participant

    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.
    #139288

    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

    #139348

    baselalova
    Participant

    Hello,

    Changing the design of hover on product effect is not an option. Please give me an alternative to this.

    #139401

    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

Viewing 4 posts - 1 through 4 (of 4 total)