Jump to content

Reducing banner height and keeping code block text vertically centered

Recommended Posts

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.  

Link to comment
  • Replies 6
  • Views 445
  • Created
  • Last Reply
2 hours ago, GregLassale said:

Add to Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.