Content Marketing
Social Media
Email Marketing
Branding
Looking at your site, I can see that your page builder is applying large amounts of padding around the text in order to create the shape of the boxes. But the boxes become misaligned when the text must flow over multiple lines in some boxes but not others at lower screen sizes.
Your page builder adds padding on the page using the !important CSS declaration so it will be difficult to apply a totally new method of displaying the boxes. And so as a workaround, you could create a selector that targets the h4 element in all 4 boxes. And then give this a min-height value that accommodates 2-3 lines of text. I say 3 lines because just before the breakpoint moves the boxes into 2-column rows it, the text displays on 3 lines. However, it might be best to solve that by triggering the 2 column layout a bit earlier or reducing the font-size of the text a bit.
This method should work for your services page too.
I hope you don’t mind if I throw in my two cents. A quick fix might be to target the page specific container row and add a height while hiding the overflow.
Set the height to what’s needed. Smaller screens seem to render fine. I didn’t test too deeply so the rows might need a bit more specific targeting…
.
.