Button alignment problems with different text lengths

Tagged: ,

Author Posts

clivo2001 December 21, 2017 at 2:00 am

Hi all, as a css novice I could do with some guidance if possible.
I have this dilemma, using a full width 3 column row with images for the backgrounds, an infobox module and a button inside the column.
The problem is I need to be able to align the buttons but as the infobox has a different amount of text in each as the text is wrapped to the next line the button gets pushed down in the column and thus gets misaligned.
The only way I have been able to do what I need for now is to make the text character count similar in each infobox, I have searched for a resolution but am stuck now, any help would be gratefully received or at least a point in the right direction on how to learn how to do it in themeover
Cheers
Clive
the site is https://www.kirkman.solutions/ and the row in question is the row under the smiling guy photo

Sebastian December 21, 2017 at 12:24 pm

Hi Clive,

I see why you struggled with this one. Sometimes it can be hard to align elements with each other. Especially when they don’t have the same parent element. Your buttons do have a common parent a few levels up (i.e. the container element for the whole row), but they do not share a direct parent element. Otherwise I would have suggested flexbox. But in this case, your best bet might be setting min-height on the 3 paragraphs of text above the button.

Can you target the 3 text elements using Microthemer? Possibly by expanding the advanced targeting options, and choosing the suggestion in the Targeting suggestions pane that has the number 3 to the right. If that’s isn’t easy for any reason, the following selector will do it (which you can manually enter into any targeting suggestion field):

.fl-node-5a3a8ce3a91c1 .uabb-infobox-text

You can then set the min-height property to 64. That will result in the buttons aligning as if the text was the same length in all 3 columns. You will need to increase this number for smaller screens via responsive tabs when the longest text first drops onto 3 lines. You can drag the top ruler above the site preview to see exactly when this happens. And possibly add a new media query via the option to the left of the responsive tabs. I recommend copying the code from an existing max-width media query and just changing the number.

The min-height solution is perhaps to easiest to implement (even though it is a bit fiddling to maintain on different screen sizes), though there are other approaches. Please let me know how you get on with it. I can advise you further is necessary.

Cheers!
Sebastian


clivo2001 December 21, 2017 at 4:11 pm

Hey Sebastian, thanks for the input and suggestions, will try it as soon as I can and report back

Cheers
Clive

clivo2001 December 22, 2017 at 10:35 am

Hi Sebastian,
An update I tried to select the 3 text elements and got it in the end using the selector you provided, I had to increase the min width as you thought I would, I ended up setting it to 160 to get it to work with tablet size devices.
As a new years resolution I am going to get my head around media query and spend some more time in microthemer as I can certainly see the value in using it even though it looks a bit daunting when first opened for a novice like myself, anyhow thanks for the support and hope you have a good Christmas and new year.
Cheers
Clive

Sebastian December 24, 2017 at 4:45 pm

Hey Clive,

Thanks for the update. One thing I forgot mention, with regards to targeting the three text boxes with Microthemer, is that sometimes the directional arrows to the left of the selector label field can be useful. Especially when working with a page builder like Beaver Builder than often has tightly nested elements that occupy the same physical space on the screen. So clicking up on the directional controls and then checking the selector suggestions again can sometimes uncover the selector you are after.

I’m here if you need help diving into responsive design.

Merry Christmas to you too!
Sebastian

You must login or register to reply to this topic.