carousel not working under 550px

Hi,
noticed that a code snippet you gave me made the carousel in product image not working under 550px.I managed to isolate the problem (removed all the code one by one) but I couldn’t find where exactly it was.

/** —————————————–
* LABELS
* ——————————————-*/
.product-label.new {
background-color: #af7186;}

.product-label{
border-radius: 2px;}

.product-label.onsale{
background-color: #fff!important;
color:#c3a377;
border:1px solid#c3a377;
right:130px;}

div.product-labels {
right: 0;
width: 100%;
max-width: 100%;}

.product-label.new {
position: absolute;
right: 0;}

div.single-product-page .product-image-summary .product-labels {
width: 100%;
max-width:100%;}

div.single-product-page .product-image-summary .product-labels .onsale {
position: absolute;
right: auto;
left: 0;
top: 0;}

div.single-product-page .product-image-summary .product-labels .new {
position: relative;}

div.labels-rectangular {
top: 8px;}

.labels-rectangular .product-label {
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;}

.product-label.featured{
background-color: #fff;
color:#595959;
border:1px solid#c3a377;}

.product-label:not(:last-child) {
margin-bottom: 6px;}

@media (max-width: 550px) {

div.single-product-page .product-image-summary .product-labels {
top: 0;
bottom: 64px;
}

div.single-product-page .product-image-summary .product-labels .featured {
position: absolute;
bottom: 0;
margin-bottom: 0;
}

div.single-product-page .product-image-summary .product-label {
font-size: 10px;
padding: 4px 4px 2px;
min-width: 35px;
line-height: 1.2;
text-align: center;

}
}

upload a video for your help

We have edited the previous code snippet relating to the labels for 550px resolution. Now the product carousel should work normally (https://gyazo.com/9f69987ca862d26b3cb51d7ec0483fa4). Please replace the code shown in the screenshot (https://gyazo.com/11a1ac6b1ff3669c750cadb74ca5ca5b), with the code snippet below.

@media (max-width: 550px) {
    
    div.single-product-page .product-image-summary .product-labels {
        position: static;
    }
    
    div.single-product-page .product-image-summary .product-label {
        font-size: 10px;
        padding: 4px 4px 2px;
        min-width: 35px;
        line-height: 1.2;
        text-align: center;
    }
    
    div.single-product-page .product-image-summary .product-labels .new {
        position: absolute;
        top: 0;
        right: 0;
    }   

    div.single-product-page .product-image-summary .product-labels .featured {
        position: absolute;
        right: 0;
        bottom: 64px;
        margin-bottom: 0;
    }    
    
    div.single-product-page .product-image-summary .woocommerce-product-gallery {
        position: relative;
        z-index: -1;
    }
}

Regards

it worked.close the ticket please

[Author]

Posts