Vertically Center Column Content

[frankburder]

Hi,

1. I can’t seem to figure this one. I’m trying to vertically center the column content of this row on the homepage:

Website: http://dev2.burdercreative.com

To look like this:

** I should also note, that as a screen size is reduced, these columns would “break” and fall below the one on the left as they do now **

2. I duplicated that row with the dog, and reversed the content (image right, copy left) but there’s a gap the right of the image. I’ve tried to right align, float that image to the right, but I can’t seem to figure it out.
   https://www.dropbox.com/s/zxdlcetum97tm3e/Screen%20Shot%202018-05-10%20at%203.38.32%20PM.png?dl=0

Any ideas?

[Alaa]

Hi @frankburder

To fix both issues, I’ve added custom element CSS rules for the column containing the text and for the image, please check this screenshot:

These are the codes added:

$el {
  vertical-align: middle!important;
}

and:

$el img {
  width: 100%;
}

Thanks.

[frankburder]

Beautiful! You guys are amazing! I’m a X Pro fan for life. These themes save me so much time as a front end dev.

[Alaa]

Thanks for your nice words, we appreciate that!

[minnow470]

Awesome! I was looking for that, too.

[Prasant]

You are most welcome.