Columns same height but buttons are not the same height & size

[Woordenaar]

Hi there

I want 2 columns on my front page to have the same height at all times, so also when the screen gets smaller.

I followed this tutorial and applied option 1 CSS code: https://xthemetips.com/create-columns-equal-heights/286/

Turns out that the columns remain equal size on all screen sizes but my buttons are not locked onto the bottom like the tutorial mentions. Instead they are both different in size and height depending on the size of the screen.

This is what I would like for all screen sizes:

But this is how it looks on certain screen sizes. Position and size of the buttons are not equal:

Also inconvenient, when screen is really small (mobile device) there is no gap between the two columns, like you can see here:

I would like a gap when viewing mobile…

Thanks in advance for your answers!

[Woordenaar]

Regarding buttons all is fixed… Still remaining is the mobile view of the two columns under each other. There is no gap between them.

I think I can fix it by making another two columns exactly the same but under each other and set only to being visible on small sizes.

So topic can be closed…

[lely]

Hi There,

Glad this is now sorted for you.

Another option for the columns with no GAP is to add class on the right column class field. Let’s say we will add, right-col. Then using CSS we can add top margin on smaller screen only like below:

@media (max-width:480px){
   .right-col{
       margin-top: 50px; /*Adjust this accordingly.*/
  }
}

Hope this helps.