Fix/sizes overflows (#179)

* fix: overflow price at popup mobile

* fix: change font-size & line-height from px to rem

* feat: change img to picture to support srcset

* fix: change countdown font size from px to rem

Author: ElisavetAmpatzidou

clips/popup-banner/clip/clip.css

@@ -36,8 +36,8 @@
   align-items: center;
   border: 1px solid var(--cta-color);
   color: var(--cta-color);
-  font-size: 12px;
-  line-height: 14px;
+  font-size: 0.75rem;
+  line-height: 0.875rem;
   align-self: flex-start;
 }
 
@@ -72,9 +72,9 @@
 }
 
 .title {
-  font-size: 30px;
+  font-size: 1.875rem;
   font-weight: 700;
-  line-height: 34px;
+  line-height:  2.125rem;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
@@ -83,9 +83,9 @@
 }
 
 .subtitle {
-  font-size: 18px;
+  font-size: 1.125rem;
   font-weight: 300;
-  line-height: 26px;
+  line-height: 1.625rem;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
@@ -98,9 +98,8 @@
   width: 390px;
   padding: 10px;
   justify-content: space-between;
-  gap: 5px; /*min-gap*/
+  gap: 9px; /*min-gap*/
   align-items: center;
-  border-radius: 4px;
   position: absolute;
   bottom: 30px;
   color: var(--product-text-color);
@@ -113,19 +112,19 @@
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   text-overflow: ellipsis;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-style: normal;
   font-weight: 400;
-  line-height: 17px;
+  line-height: normal;
 }
 
 .price-wrapper {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 9px;
-  font-size: 16px;
-  line-height: 16px;
+  font-size: 1rem;
+  line-height: 1rem;
 }
 
 .new-price {
@@ -242,14 +241,14 @@
 }
 
 .value {
-  font-size: 30px;
-  line-height: 30px;
+  font-size: 1.875rem;
+  line-height: 1.875rem;
 }
 
 .countdown-text {
-  font-size: 11px;
-  line-height: 11px;
-  letter-spacing: 1.1px;
+  font-size: 0.6875rem;
+  line-height: 0.6875rem;
+  letter-spacing: 0.06875rem;
 }
 
 .info-product-details {
@@ -270,7 +269,8 @@
     display: flex;
     padding: 11.683px 15.577px;
     align-self: stretch;
-    font-size: 10px;
+    font-size: 0.625rem;
+    line-height: 0.625rem; 
   }
 
   .products-bg {
@@ -337,6 +337,9 @@
     width: 302px;
     height: 360px;
   }
+  .cta-countdown {
+    width: 302px;
+  }
 
   .cta-countdown {
     gap: 30px;
@@ -347,12 +350,12 @@
   }
 
   .title {
-    font-size: 23px;
-    line-height: 26px;
+    font-size: 1.4375rem;
+    line-height: 1.625rem;
   }
   .subtitle {
-    font-size: 14px;
-    line-height: 20px;
+    font-size: 0.875rem;
+    line-height: 1.25rem; /* 142.857% */
   }
 
   .abstract-lines1-wrapper {
@@ -367,15 +370,15 @@
   }
 
   .product-description {
-    width: 180px;
-    height: 30px;
-    min-width: 180px;
-    max-width: 202.507px;
-    font-size: 11px;
+    max-width: 180px;
+   font-size: 0.688rem;
+   line-height: 0.81rem;
   }
+
   .price-wrapper {
     gap: 9px;
-    font-size: 13px;
+    font-size: 0.8125rem;
+    line-height: 0.75rem;
   }
 }
 
@@ -472,8 +475,8 @@
 
   .title {
     width: 436px;
-    font-size: 1.8rem;
-    line-height: 26px;
+    font-size: 1.5rem;
+    line-height: 1.55rem;
     -webkit-line-clamp: 2;
   }
 
@@ -491,6 +494,8 @@
     transform-origin: top left;
     transform: scale(0.6);
     display: block;
+    margin-top: -3px;
+    margin-bottom: -8px;
   }
 
   .product-details {
@@ -500,11 +505,11 @@
   .info-product-wrapper {
     width: 436px;
     position: relative;
-    height: 40px;
+    height: 47px;
   }
   .info-product {
     width: 436px;
-    height: 40px;
+    height: 47px;
     position: absolute;
     right: 0px;
     width: 0;
@@ -516,7 +521,7 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 10px;
+    gap: 8px;
     color: var(--text-color);
     right: 0;
     background-color: var(--text-bg-color);
@@ -532,7 +537,7 @@
   }
 
   .countdown {
-    gap: 5px;
+    gap: 3px;
     width: 150px;
     height: 37px;
     align-items: center;
@@ -544,21 +549,21 @@
     flex-direction: row;
     gap: 0px;
     color: var(--cta-color);
-    width: 19px;
+    width: 1rem;
   }
 
   .value {
-    font-size: 15px;
-    line-height: 15px;
+    font-size: 0.75rem;
+   line-height: 1.5rem;
   }
 
   .countdown-text {
     display: none;
   }
 
   .d {
-    font-size: 15px;
-    line-height: 15px;
+    font-size: 0.75rem;
+   line-height: 1.5rem;
     display: block;
   }
 }
@@ -642,9 +647,8 @@
   }
 
   .title {
-    font-size: 1.5rem;
-    line-height: 16px;
-    margin-bottom: -10px;
+    font-size: 1.1rem;
+    line-height: 1.15rem;
     max-width: 259px;
     -webkit-line-clamp: 2;
   }
@@ -663,6 +667,7 @@
     transform-origin: top left;
     transform: scale(0.35);
     display: block;
+    margin-top: -10px;
     margin-bottom: -18px;
   }
 
@@ -698,12 +703,13 @@
   .product-description {
     max-width: 259px;
     -webkit-line-clamp: 1;
-    font-size: 12px;
-    line-height: 20px;
+    font-size: 0.75rem;
+    line-height: normal;
   }
   .price-wrapper {
     gap: 9px;
-    font-size: 13px;
+    font-size: 0.875rem;
+    line-height: 1rem;
   }
 
   .countdown-mini {
@@ -723,17 +729,17 @@
     flex-direction: row;
     gap: 0px;
     color: var(--cta-color);
-    width: 14px;
+    width: 0.95rem;
   }
 
   .value {
-    font-size: 12px;
-    line-height: 12px;
+    font-size:0.75rem;
+    line-height:0.75rem;
   }
 
   .d {
-    font-size: 12px;
-    line-height: 12px;
+    font-size:0.75rem;
+    line-height:0.75rem;
     display: block;
   }
 }

clips/popup-banner/clip/clip.html

@@ -3,12 +3,17 @@
     <div class="info-cta">
       <div class="info">
         <div class="details-wrapper">
-          <img
-            mc-if="initParams.logo.length > 0"
-            class="logo"
-            src="{{initParams.logo.default}}"
-            alt="logo"
-          />
+          <picture mc-if="initParams.logo.default" class="logo">
+            <source
+              class="logo"
+              mc-for="key,item"
+              mc-of="initParams.logo"
+              mc-if="{{key}}!='default'"
+              srcset="{{item}}"
+              media="{{key}}"
+            />
+            <img alt="logo" src="{{initParams.logo.default}}" class="logo" />
+          </picture>
           <div class="abstract-lines2-wrapper">
             <svg
               width="119"