Responsive counter circle

[deranaloge]

hi there,

in a post 14 days ago i got help with a counter circle. it works but it does not look good when looked on small screens.
so i tried a responsive circle and added following code to the element css (i added it only to the first counter to test it.)

$el {  
  background:rgb(212, 146, 85);
  border-radius:50%;
  -moz-border-radius: 50%; 
  -webkit-border-radius: 50%;
  width:100%;
  height:0;
  padding-bottom: 100%;
}

that does the trick with the responsive circle ( i will make a diffrent one for mobile view i there is no other option).

but now i have a problem with the text. i cant find the right selector to center the text vertically. or os there a way to gice the text a padding amount in the settings?

or can the behaviour of the point when the row is switching be changed?
would be nice if when viewed on big screens 4 circles in one row are visible(4x1), when the screen get´s smaller it makes a 2x2 (2rows with 2 circels) and on mobile 1x4.

thanks for your help.

[nabeel]

Hi Harald,

Thank you for reaching out to us. I checked your counters and did some tests, with CSS only it’s not easy to make the perfect circles in all screen resolutions. I found a pen here https://codepen.io/CrocoDillon/pen/trFam that might work in your scenario with few adjustments but you’ll have to remove the the inline CSS max-width: 250px; from your counter elements.

I applied the following code to you first counter and that’s how far the CSS can go:

$el {
  position: relative;
    width: 100%;
    height: 0;
    padding: 50% 0;
    margin: 1em auto !important;
    border-radius: 50%;
    background: rgb(212,146,85);
}

$el > .x-counter-number-wrap {
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 40px
}
$el > .x-counter-number-wrap:before {
  content: '';
  vertical-align: middle;
  display: inline-block;
  width: 0;
  height: 100%;
}
$el > .x-counter-after {
  position: relative;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 30px;
}

Please clear your browser’s and check your page now. Hope this helps!

[deranaloge]

hi,
many thanks!
i will try to twek it tomorrow

cheers

[nabeel]

You’re always welcome Harald.

Cheers!

[deranaloge]

hi nabeel,

i tweaked it a little bit now it works great! thank again for your help.
here is the full code if anyone needs it:

@media (max-width: 767px) {
 $el {  
  background-color:rgb(212, 146, 85);
  border-radius:20px;
  width:250px;
  height:250px;
  border-radius:125px;
  padding:45px
 }
}
@media (min-width: 768px) {
$el {
  position: relative;
  width: 100%;
  height: 0;
  padding: 50% 0;
  margin: 0em auto !important;
  border-radius: 50%;
  background: rgb(212,146,85);
}
$el > .x-counter-number-wrap {
  position: absolute;
  top: -0.5em;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  }
$el > .x-counter-number-wrap:before {
  content: '';
  vertical-align: middle;
  display: inline-block;
  width: 0;
  height: 100%;
}
$el > .x-counter-after {
  position: relative;  
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  }
}
@media (min-width: 1200px) {    
  $el > .x-counter-number-wrap {
    font-size: 5em;
  }
  $el > .x-counter-after {
    font-size: 3em;
  }
}
@media (min-width: 980px) and (max-width: 1199px) {
  $el > .x-counter-number-wrap {
    font-size: 4.5em;
  }
  $el > .x-counter-after {
    font-size: 2.5em;
  }
}
@media (min-width: 768px) and (max-width: 979px)  {
  $el > .x-counter-number-wrap {
    font-size: 4em;
  }
  $el > .x-counter-after {
    font-size: 2em;
  }
}

cheers

[rad]

Glad it’s working now and you’re most welcome!