Reducing banner height and keeping code block text vertically centered

Site URL: https://gregorylassale.com/

I am trying to reduce the height of a particular banner while keeping the text (inserted via code block and html) vertically centered. Part of the html is:

.counter {
  font-size: 40px;
  line-height: 60px;
  font-weight: 100;
}

Reducing the line-height value works to a point, after which the text is off-center.   

Any help is greatly appreciated as always.  

Thanks.  

Hi. Can you share link to page where you have problem? We can help easier

Hello.

https://gregorylassale.com/english#counters 

and https://gregorylassale.com/french#countersfr for the FR version.

Thank you!

2 hours ago, GregLassale said:

Hello.

 

https://gregorylassale.com/english#counters 

and https://gregorylassale.com/french#countersfr for the FR version.

Thank you!

 

Add to Design > Custom CSS

/* Counter banner height */
section#counters>div, section#countersfr>div {
    padding-top: 5px;
    padding-bottom: 5px;
}

@tuanphan Thank you so much for this and all that you do on the forum. One other question. How can I reduce the space between the counters and text below ("coups of coffee", etc.) ? I tried playing with a few parameters in the html to no avail.

Thanks again. 

As an alternative to controlling the distance between the counters and text granularly, distributing the two vertically within the container could work.

23 hours ago, GregLassale said:

@tuanphan Thank you so much for this and all that you do on the forum. One other question. How can I reduce the space between the counters and text below ("coups of coffee", etc.) ? I tried playing with a few parameters in the html to no avail.

Thanks again. 

Add to Design > Custom CSS

/* space counter - text */
div#counterbox p {
    margin-top: 0px;
}
.counter {
    line-height: 50px;
}