[akashadeParticipant]

I have a row broken into 1/3s. The 1st column is text, 2nd is an image, and 3rd is text. In essence I have taller (text) content on both sides of shorter (image) content. I’m looking for a setting or class that will vertically-center the content of all columns in the row, using the tallest column in the row as the total or max height, thus centering all the row’s contents regardless of the screen size. In a full screen (1920×1080) the image is “almost entered due to its native size, however when the screen size is reduced columns 1 & 3 become taller as the text spills down while the image in column 2 remains at the top. hairstonprotective.com/hgps/ (Site requires temp. password to view: hgps123)
WP Ver. 4.0, X Theme Ver. 2.3.0, Shortcode Plugin Ver. Unknown – No Visual Composer info shows in my “Installed Plugins”

[Paul RModerator]

Hi,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer.

#x-content-band-2 .x-column  {
      float:none;
      display:inline-block;
      vertical-align:middle;
      margin-right:3%;
}

#x-content-band-2 .x-column:last-child  {
      margin-right:0;
}

#x-content-band-2  {
     text-align:center;
}

#x-content-band-2 p {
     margin:0;
}

Hope that helps.

[akashadeParticipant]

That did it. Thank you!!

[Nabeel AModerator]

You’re most welcome!

[maqaqucoParticipant]

Hi there,

I have the same issue. I’ve tried to apply vertical alignment adding

vertical-align:middle;
and

float:none;
      display:inline-block;
      vertical-align:middle;
      margin-right:3%;

to the column, row and element style, separately, with no success.

I’m trying to align the images so it can look like a table or grid. Btw, the Grid element hasn’t work it out for me either.

Thanks a lot in advance!

[maqaqucoParticipant]

This reply has been marked as private.

[RupokMember]

Hello @maqaquco

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[maqaqucoParticipant]

Hi there,

I’m trying to align vertically the images on my Complices section.

To build that section I’ve used one row for the headline and four rows for the images. Each row with images is divided in four columns.

My issue is that I need to align the images on each “cell” vertically. In order to see that I think that I could add some code that aligns the row elements. But I couldn’t have figure it out.

[John EzraMember]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

div#complices .x-container.max.width {
    text-align: center; 
}

div#complices .x-column.x-sm.x-1-4 {
    display: inline-block;
    height: 100%;
}

div#complices img.x-img {
  position: relative;
  top: 50px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Hope this helps – thanks!

[maqaqucoParticipant]

Awesome! That worked! Thanks a lot!!! (:

[LelyModerator]

You’re welcome.

Cheers!
X

[grantfeldmanParticipant]

Hi there, sorry to dig up an old issue, but I am having the same problem with my site columns … have tried copying the two different code options suggested above but no luck. Here is my site: http://119.81.84.158/~linkfit1/

The narrow band under the video has four columns, the first with text and the other 3 with logo images. I need the whole row (text and images) to be vertically aligned in the middle. At the moment it seems to be defaulting to the top so the images look off.

Can someone help me do this?

Thanks in advance 🙂

[Rue NelModerator]

Hello Grant,

Thanks for updating this thread!

To align the text and logos vertically, please edit your page in Cornerstone and in your row settings, enable the margin less columns.

Once enabled, please also insert the following custom css in the settings tab, Settings > Custom CSS

.x-section .x-container.marginless-columns .x-column {
    vertical-align: middle !important;
}

.x-section .x-container.marginless-columns .x-column .x-img{
    margin-bottom: 0;
}

Please let us know if this works out for you. Thank you.

[grantfeldmanParticipant]

Worked a treat for the images, but the text is still not centred … any ideas?

[Rue NelModerator]

Hi Grant,

Please edit your page again in Cornerstone and click on your text. You are using a custom headline element. Please turn on the advance controls and insert a custom man class. This should remove the top and bottom margin of the custom headline element. For more details about this element spacing utility class, please check it out here:
https://community.theme.co/kb/element-spacing/
https://community.theme.co/kb/css-class-index/

As an alternative, you can insert the following custom css in the settings tab, Settings > Custom CSS

.x-section .x-container.marginless-columns .x-column .h-custom-headline {
    margin: 0 auto;
}

Please let us know if this works out for you.

[Author]

Posts