How to make a button square shaped?

Support
#1

I want to make the buttons in 5 columns appear square shaped (not just square corners of the ‘square’ setting). The buttons are set to ‘block’.

Also how do I alter the font size so all text fits… some of them are also not centered.

Thanks in advance.
Jan

#2

Hi there,

Please kindly go to the style option of each button and add a code like this:

min-height: 200px;

Try to change 200px to whatever size suits your need.

Do the same for the font size and centering. The final code there should be something like this:

min-height: 200px; text-align: center; font-size: 30px; display: inline-flex; align-items: center;

Change the 200px and font size 30px accoringly.

Thank you.

1 Like
#3

Thank you so much for your help!

#4

On behalf of my colleague, you’re welcome. Cheers!

#5

I’m having a further problem with this - see screenshot. The buttons in question are high lighted with red squares. The text in these buttons is not centered. How do I get them to be centered? I’m using the CSS previously suggested above.

#6

Hi There,

Could you please provide us with your website URL so we can take a closer look?

Thanks.

#7

Can you mark this reply as private please?
http://vet.lism.catholic.edu.au/index.php/vet-programs/vet-courses/

#8

Hi there,

You can change it to something like this, inline-grid with text alignment to center, and 0 padding.

min-height: 200px; text-align: center; font-size: 30px; display: inline-grid; align-items: center; text-align: center; padding: 0px;

That should do it, cheers!