Dynamic even row

Good day, I have the following issue. I am creating a row with four columns that contains text, icons, ess. grid. The problem is that the number of characters differs from one column to another and in big screens it looks uneven like in the following picture
I had to what is contain in the image on one row, otherwise in mobiles it does not show line up. It shoes per example only the title, then only the list, then only the text and at the end the ess grid. When in reality I want it to be shown title1, list1, text1, ess grid1; title2, list2, text2, ess grid2 […] Is there anyway I can make the ess grid look even on a straight line without having to add gaps and change the pixels accordingly to the screen size? I tried that and it is a pain… plus the preview does not really show how it looks as the edit side bar (even after hiding it) changes how it looks live.

Thank you in advance. PS i am using xtheme not pro.

Hi There,

Please provide your URL.

Thanks!

www.dogsledding.is/fridfinnur

Hello There,

Thanks for providing the url of your site. Please edit you page back in Cornerstone. Remove the gap elements and in each of your icon list element, please insert an inline css min-height: 200px; in the style field. This should initialize a height for each icon list and will make sure that the images will be align at the bottom.

Hope this helps. Kindly let us know.

Dear RuelNel, thank you for your help. However, it keeps on working like the “gaps” i had placed before. The height needs to be adjusted per column and per screen type.

Hello There,

You can’t relay control the height in different screen sizes. The best that you can do is to remove the gap elements first and then in your icon list, you will have to add 8 items even if you just leave the other items as blank and then set a minimum height.

You can also swap out the image and the icon list so that the images will be align and the icon list will not be noticeable once they are no longer have the same height.

Hope this helps.