Is vertically aligning columns a possibility?

Support
#1

Hi

I have tried a lot of methods to get columns to vertically align but to no avail (please see the problem when resizing the browser window on this page - https://www.steedman.co.uk/services/ ) .

In a previous post one of your team said this is outwit the scope of the help section for some reason but I was wondering if you can offer any help at all? Even point me in the right direction if possible since it is an extremely annoying issue within such a great theme.

To be clear what I am trying to achieve is the ‘card’ layout where it says ‘Our Services’ near the top of the page in above link. For now I have had to adjust the length of the text to try to get the white box to align to the bottom but this is not really a good method when it comes to responsiveness and also means I have to edit my text a lot to try to make it comply.

Some of the methods I have tried include:

  1. Marginless Columns (changing to) - this does not allow a gap between the columns, although it does seem to vertically align them (e.g. there is a white box extending to the base of each column). However it requires the gap for the ‘cards’ style layout.

  2. Flex - various flex methods but none worked.

  3. Aligning to the middle - this seemed to work with trialing various methods but it is not what I’m trying to achieve. I require the columns to be aligned at the top and bottom also.

  4. Following other posts here on this topic. In this case I tried various js and css modifications but nothing worked.

So, that is as much as I can really attempt without some help. I there’s nothing that can be done I will just have to accept it!

Thanks for your help

#2

Hi There @russell3

Thanks for writing in! To get started, please follow our guide on equal column heights here (https://theme.co/apex/forum/t/code-snippet-make-all-columns-equal-height/272).

Then for further optimization options, you can follow this thread to get an idea (https://theme.co/apex/forum/t/equal-heights-1-3-columns/42559/8).

Hope that helps.

#3

Brilliant, thanks. Will try this. Yes – I just didn’t know how to get started.

Thanks again

#4

Glad to know!

Thanks

#5

Hello, I have now tried all of these methods but neither work.

On this page

https://www.steedman.co.uk/services/accounting/annual-accounts/

I followed the instructions on the links you sent but the card style elements and buttons still do not sit level within the columns, and the columns are all of different heights?

#6

Upon re-opening the page (link above) the columns do now seem to be vertically aligned (from trialing the method you advised upon in my original post.

The only issue I have now really is that the buttons at the bottom of the columns need to be aligned at the bottom of each column so I am wondering how to achieve that?

Thanks again

#7

Actually still not working. The columns appeared to be the same height but weren’t when I change the size of the window.

#8

Apologies about repeatedly commenting on my original post as I was able to carve out more time to keep working on it. With some trial and error work I have got the columns working at equal heights by following the tutorial and experimenting. The only issue I have now is the same as my earlier post which is how to get the buttons to align at the the bottom - which may just be a CSS tweak or something. Thanks again.

#9

This is now sorted by having experimented extensively and getting it to eventually work. Thanks.

#10

Hey @russell3,

Thanks for updating the thread. I saw that buttons are already aligned in your site. Glad you’ve sorted it out.

#11

Yes great to have it working. It seemed to work when I put the css you provided in the ‘Additional CSS’ areas of the Customiser. When I entered it in the Global CSS area that didn’t seem to work for some reason. Thanks!

#12

Hi @russell3,

I am suspecting that there is an invalid entry in your Global CSS which created this conflict and that’s why the code did not work. Please go to Theme Options > CSS: and check for any syntax error (could be a missing curly bracket or an extra curly bracket) or you can check it with csslint (http://csslint.net/1) for errors in the code.

Please let us know how it goes.

#13

OK that’s great thanks will have a look.

#14

Yes sure do let us know how it goes.

Cheers!

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.