mobile css angebote

by mtenschert

CSS

/* 1. In den HTML Elementen, die wir für Mobil für die Special Offers benutzen, findest du drei Elemente, die "promo-inner-container important-label" 
oder "promo-inner-container" oder "promo-inner-container borderd" verwenden,
diese musst du alle auf "promo-inner-container important-label-mobil" ändern.

/* 2. In Main.css hinzufügen, oder du fügst die Eigenschafften dieser bereits existierenden Klasse hinzu. */
@media screen and (max-width: 767px) {
  .product__discount-types.product__content-col {
    margin-top: 10px;
  }
}


/*  3. In Main.css hinzufügen, oder du fügst die Eigenschafften dieser bereits existierenden Klasse hinzu. */
@media only screen and (max-width: 767px) {
   .product__additionals.product__content-col {
     padding-left: 5px;
     border-left: 1px solid #d7d7d7;
     border-radius: 0;
     border-bottom: 1px solid #d7d7d7;
     }
}

/* 4. In Main.css folgende css regeln hinzufügen: */
.promo-inner-container.important-label-mobil {
  border: none !important;
}

.important-label-mobil .free-cancellation-label,
.important-label-mobil .best-price-label,
.promo-inner-container.important-label-mobil > div,
.promo-inner-container.important-label-mobil > ul {
  border-left: 1px solid #d7d7d7;
  padding-left: 5px;
  padding-bottom: 0px;
  padding-top: 0px;
}

.promo-inner-container.important-label-mobil > div,
.promo-inner-container.important-label-mobil > ul,
.promo-inner-container.important-label-mobil strong,
.promo-inner-container.important-label-mobil ul li,
.promo-inner-container.important-label-mobil small {
  font-weight: normal !important;
  font-size: 12px;
}

.promo-inner-container.important-label-mobil > .best-price-label {
    background: #b62126;
    padding-top: 3px;
    padding-bottom: 3px;
    color: white;
    border-left-color: #b62126;
}