-
Posts
-
Hi, I’m trying to make specific column rows the same height. the issue is the content in the columns various and than there is a gap between the content and button. What is the best solution for things to be even? I have a lot of columns on different pages so I will need to assign classes so it does not apply to all columns. Or should I just add the whitespace element to fill the gaps?
Hey lauragale2020,
Thank you for the inquiry.
Since the sizes of the images and the button element are the same, and only the content or the Special Heading element varies in height, try applying a Custom CSS Class to the Special Heading elements, then set a minimum height using custom css.
Example without a custom css class:
#top .av-special-heading { min-height: 95px; }
Let us know if you need more info.
Best regards,
IsmaelThanks! what would the code be if i make the class “locationscolumn” I know where to put the class but always mess up with adding the class to the css.
Hi,
Try:#top .av-special-heading.locationscolumn { min-height: 95px; }If this doesn’t help, please add the “locationscolumn” class so we can examine.
Best regards,
MikeHi, I tried adding the code provided and added the css class to the special heading elements in the first columns but things are still not aligned. Screenshot Attached
Hi,
Thank you for the update.
We noticed that the custom css class is only applied to certain special heading elements. To simplify things, instead of applying the custom css class directly to the special heading elements, add it to the color section containing the columns, and then use the following css code:
#top .locationscolumn .av-special-heading { min-height: 95px; }Best regards,
Ismael
- You must be logged in to reply to this topic.