Align multiple texts columns and rows responsively

[intercomputer]

Hoping I can get a quick response here because I’ve been working on this myself for a while and can’t find the right solution when searching the forums.

I have 6 columns of content, including an image and two separate text elements in each column. The text elements have slightly different lengths (1 line vs 2 lines for the headings, for example), so I set margins and padding to make things align horizontally. The works in one view, but when I responsively change the viewport, the margins don’t keep the spacing correct due to the text changing it flow within the columns.

What’s the best practice here to get headings and subheadings and LEARN MORE/COMING SOON links to align right?

Here’s in full width view. Not aligned right unless I tweak the margins.

Here’s in a tablet sized viewport. Definitely not aligned

[ruenel]

Hello ICN,

Thanks for the very detailed post information. I have check your page and I see an inconsistent elements. So I went ahead and edited the page. I have made sure that each column have the same element and each element is using the same tag too. I have remove the <br> tag and separated the text and the button with a <p> tag. I also added custom class like my-image, my-heading and subheading for each element in their respective columns. And lastly, I added this custom css in the Cornerstone > Custom CSS section:

.x-text.my-heading {
  min-height: 76px;
}

.x-text.subheading > p{
  min-height: 150px;
}

@media(max-width:85px){
  .x-text.subheading > p{
    min-height: 200px;
  }
}

Please check out your page now.