Aligning grid elements in the cell

Support
#1

Good morning,

I have a question and I hope you can help me with this finishing touch.
I used the grid with the option repeat(auto-fit, 18 brake, 1 fr)). This works perfectly.
There are 4 cells.

The cell contains an image, with underneath

  • caption - text-element
  • featured image
  • text (bit longer description text - every cell another text - so not equal length of text)
  • link - (text-element with link)

This ‘Read more’ text link I placed at the bottom of the cell using margine:auto. So it lines perfectly at the bottom of the cell.

However, the caption text (just a text element) is not equally high, it depends of course on which screen width you look at. As you see in this example: in the first cell it has 2 lines - in the other cells just one line. And therefore the images underneath are not in line.

Schermafbeelding producten Horti
Schermafbeelding producten Horti1500×965 729 KB

This makes the layout of the cell a bit messy.
Is it possible - in an easy way - to give this text element a fixed height? So that everything below it aligns better? (Obviously not necessary for the bottom link, which is already aligned).

If not - is there another way to obtain the alighnment?

Thank you very much.

#2

Hey Liesbeth,

We might have a suggestion if we could see the actual setup of the page. Please give us the URL of the page you showed in the screenshot.

Thanks.

#3

I send you a secure note.

#4

Hello Liesbeth,

To align your contents in a cell, you must enable the Flexbox option in each cell. Adding the auto top margin to the element in the cell should make align to the bottom of the cell. For the “Intro Tekst” headline element, click each of the headline element, find the “Customize” tab and add this inline element CSS to set a minimum height:

$el {
  min-height: 200px;
}

Feel free to make adjustments as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Intro to CSS - https://goo.gl/mFuWQT
How to get CSS selectors - https://goo.gl/BmoH39
Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa

#5

Thanks so much!
This helps me a lot.

Have a great day.

#6

Hi @beverinnovations,

You’re welcome and it’s our pleasure to help you. If you have any other concerns regarding our theme features, feel free to reach us.

Thank you.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.