Reduce Size of 'SALE' circle according to screen size

3 hours ago, niteshifte said:

I have a 'Sale' icon on my site which works great for all breakpoints apart from tablet mainly where it completely covers the product and where it becomes way too big.

This is the code that I am currently using below. What would I need to add to this code in order for the graphic to reduce in size but stay roughly in the same position as it does on other breakpoints?

https://www.peterotoole.ie/shop/sale

/* Changes the look of the SALE tag and put it into a red circle, top right */
.product-mark.sale {
    position: absolute;
    top: 50px;
    right: 20px;
    border: 0px solid white;
    width: 120px;
    height: 120px;
      font-size: 38px !important;
      color: white !important; 
    text-align: center;
       padding: 2px 2px 0 2px;
    background: #EE3129;
    color: white;
    border-radius: 50%;
    line-height: 112px;

Thanks as always!

Peter

You can use the css style for each breakpoint

.product-mark.sale {
  position: absolute;
  top: 50px;
  right: 20px;
  border: 0px solid white;
  width: 120px;
  height: 120px;
  font-size: 38px !important;
  color: white !important; 
  text-align: center;
  padding: 2px 2px 0 2px;
  background: #EE3129;
  color: white;
  border-radius: 50%;
  line-height: 112px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 767px) {
  /*Mobile style*/
  .product-mark.sale {
    width: 100px;
    height: 100px;
    font-size: 20px !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  /*tablet style*/
  .product-mark.sale {
    width: ???;
    height: ???;
    font-size: 20px !important;
  }
}

Support me by pressing 👍  or marking as solution if this useful for you