CODEWITHSUNDEEP
androidcss
merlin
merlin

Reputation: 2897

CSS scale() not working on Android Chrome 70 and other versions

I want to show a small colored dot in front of a price tag. The dot should be centered vertically next to the price and scaled up a bit.

This works on chrome desktop, iOS, Safari and others.

enter image description here

But on Android the dot is huge and takes up the entire space of the div.

enter image description here

.item.green::before {
  content: "●";
  color: #7ED321;
}

.item {
  transform: scale(1.4);
  display: inline-block;
  vertical-align: text-top;
}

.priceText {
  bottom: 20px;
}
<div class="priceText">
  <span class="item green" style="" title="Verfügbarkeit"></span> 1.050&nbsp;€
</div>

How can I center the dot verically and make sure in Android it is shown with the scale factor provided?

Upvotes: 0

Views: 264

Answers (2)

Temani Afif
Temani Afif

Reputation: 272590

Consider a simple background instead where you can easily adjust the size and position.

You can also consider CSS variable to adjust the color:

.priceText {
  padding-left: 15px;
  background:radial-gradient(var(--c,#7ED321) 4px,transparent 5px)  /*4px radius*/
    left center /*position*/
    /
    10px 10px /*size: must be at least 2xradius*/
    no-repeat;
}

.orange {
  --c:orange;
}
<div class="priceText">
   1.050&nbsp;€
</div>

<div class="priceText orange">
   1.050&nbsp;€
</div>

Another syntax:

.priceText {
  padding-left: 15px;
  background:
    radial-gradient(circle at 5px 50%, var(--c,#7ED321) 4px,transparent 5px) 
    no-repeat;
}

.orange {
  --c:orange;
}
<div class="priceText">
   1.050&nbsp;€
</div>
<div class="priceText orange">
   1.050&nbsp;€
</div>

Upvotes: 1

glory kingzman
glory kingzman

Reputation: 1

You can use media query to control what happens when the screen size is scaled down to Android

@media screen and (min-width: 400px) {
  .items {
    transform: scale(1.4);
  }
}

Upvotes: 0

Related Questions