a, i, span { text-decoration: none; } .frame { height: 250px; white-space: nowrap; /* This is required unless you put the helper span closely near the img */ text-align: center; /* border-style: ridge; */ } @media only screen and (min-width: 1440px) { .frame { height: 250px; } } @media only screen and (min-width: 2000px) { .frame { height: 250px; } } @media only screen and (min-width: 960px) { .frame { height: 250px; } } @media only screen and (device-width: 768px) { .frame { height: 250px; } } @media only screen and (min-device-width: 481px) and (max-device-width: 575px) { .frame { height: 350px; } } /* different techniques for iPad screening */ @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { .frame { height: 200px; } } @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { .frame { height: 200px; } } @media only screen and (max-device-width: 480px) { .frame { height: 200px; } } @media only screen and (max-device-width: 360px) { .frame { height: 200px; } } .helper { display: inline-block; height: 100%; vertical-align: middle; } .thumb-product { vertical-align: middle; max-height: 350px; max-width: 350px; margin-left: -3px; } .art-product-name { display: block; width: 100%; height: 40px; } .art-product-stock { display: block; width: 100%; height: 15px; } .art-producs-content { min-height: 300px; } @media (max-width: 575px) { .art-product-name { display: block; width: 100%; height: 25px; } .art-product-stock { display: block; width: 100%; height: 12px; } } .frame { height: 250px; white-space: nowrap; /* This is required unless you put the helper span closely near the img */ text-align: center; /* border-style: ridge; */ } @media only screen and (min-width: 1440px) { .frame { height: 250px; } } @media only screen and (min-width: 2000px) { .frame { height: 250px; } } @media only screen and (min-width: 960px) { .frame { height: 250px; } } @media only screen and (device-width: 768px) { .frame { height: 250px; } } @media only screen and (min-device-width: 481px) and (max-device-width: 575px) { .frame { height: 350px; } } /* different techniques for iPad screening */ @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { .frame { height: 200px; } } @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { .frame { height: 200px; } } @media only screen and (max-device-width: 480px) { .frame { height: 200px; } } @media only screen and (max-device-width: 360px) { .frame { height: 200px; } } .helper { display: inline-block; height: 100%; vertical-align: middle; } .thumb-product { vertical-align: middle; max-height: 350px; max-width: 350px; margin-left: -3px; } .art-product-name { display: block; width: 100%; height: 40px; } .art-product-stock { display: block; width: 100%; height: 15px; } .art-producs-content { min-height: 300px; } @media (max-width: 575px) { .art-product-name { display: block; width: 100%; height: 25px; } .art-product-stock { display: block; width: 100%; height: 12px; } } .art-product-card { position: relative; z-index: 1; } .art-product-card .badge { z-index: 10; } .art-product-card .product-thumbnail { text-align: center; } .art-product-card .product-thumbnail img { width: 100%; } .art-product-card .product-title { font-size: 14px; font-weight: 400; margin-bottom: 0.25rem; text-decoration: none; color: #020310; } .art-product-card .sale-price { margin-bottom: 0.25rem; color: #212529; font-weight: 400; } .art-product-card .sale-price span { color: #747794; margin-left: 5px; text-decoration: line-through; font-size: 14px; } .art-product-card .btn-cart { padding: 0; border-radius: 50%; width: 30px; height: 30px; text-align: center; line-height: 30px; position: absolute; right: 12px; bottom: 12px; font-size: 1rem; z-index: 9; } .ribbon { position: absolute; top: 50px; padding-left: 65px; z-index: 20; /* text-transform: uppercase; */ letter-spacing: 0.1em } .ribbon .ribbon-background { position: absolute; top: 0; right: 0 } .ribbon .theribbon { position: relative; width: 100; padding: 3px 10px 3px 10px; margin: 10px 5px 5px -71px; color: #fff; } .ribbon .theribbon:before, .ribbon .theribbon:after { content: ' '; position: absolute; width: 0; height: 0 } .ribbon .theribbon:after { left: 0px; top: 100%; border-width: 5px 10px; border-style: solid; } .ribbon.satu { top: 0 } .ribbon.dua { top: 30px } .ribbon.tiga { top: 60px } .ribbon.satu .theribbon { text-shadow: 0px 1px 2px #bbb } .ribbon.dua .theribbon { text-shadow: 0px 1px 2px #bbb } .ribbon.tiga .theribbon { text-shadow: 0px 1px 2px #bbb } .ribbon.merah .theribbon { background-color: #b50000; } .ribbon.hijau .theribbon { background-color: #05a351; } .ribbon.biru .theribbon { background-color: #49a3ba; } .ribbon.primary .theribbon { background-color: var(--art-primary); } .ribbon.merah .theribbon:after { border-color: #b50000 #b50000 transparent transparent } .ribbon.hijau .theribbon:after { border-color: #0c5c32 #0c5c32 transparent transparent } .ribbon.biru .theribbon:after { border-color: #226273 #226273 transparent transparent } .ribbon.primary .theribbon { color: var(--art-primary-text); } .ribbon.primary .theribbon:after { border-color: var(--art-primary) var(--art-primary) transparent transparent } a, i, span { text-decoration: none; } ul { list-style-type: none; padding-left: 0; } .choose-size-radio li span { width: auto; min-width: 20px; height: 24px; background-color: #ffffff; text-align: center; padding-left: .2rem; padding-right: .2rem; margin-left: .5rem; border-radius: .25rem; font-size: 12px; line-height: 24px; color: #747794; display: block; box-shadow: 0 1px 2px 0 rgba(15, 15, 15, 0.175); } .choose-size-radio li a:hover, .choose-size-radio li a:focus { color: #ffffff; background-color: #ea4c62; } .choose-size-radio li.active span { color: #ffffff; background-color: #ea4c62; } .choose-size-radio li.disabled span { color: #ffffff; background-color: #D1D0CE; }