Centered Textbox with Light Box Image link

[ssbukowski]

Hi,

I’m having an issue I can’t seem to get sorted.

My site has a background image with a text box overlay in which I’ve added a lightbox image link to a video.

My goal is to have the lightbox image centered horizontally and vertically across all devices.

I’ve added a custom class to the textbox and it works on all the size displays except 481px - 767px.

This is the code:

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

And here are examples for context:

Working:

Not Working:

Any suggestions?

[ruenel]

Hello Stephen,

Thanks for writing in! The code no longer works in smaller screens because the display layout of the row container has been changed from table to block. Please edit your page back in Cornerstone and insert the following custom css, Custom CSS

@media(max-width: 767px) {
  .x-section .x-container.marginless-columns {
    display: table;
    table-layout: fixed;
  }

  .x-section .x-container.marginless-columns>.x-column {
    display: table-cell;
    margin-right: 0;
    float: none;
    vertical-align: middle!important;
  }
}

We would loved to know if this has work for you. Thank you.

[ssbukowski]

Hi @RueNel,

Unfortunately that did not work.

Any other suggestions?

I’m happ[y to share login credentials if that would help.

It also bears mentioning that I’m using X Pro rather than Cornerstone.

[jade]

Hi Stephen,

Yes, kindly provide us with the admin details of your site in a Secure Note so that we can check it.

Thank you.

[ssbukowski]

@Jade

Thank you. I’ve responded with a secured in my reply above.

Please confirm you gain access.

[ruenel]

Hi Stephen,

I have logged in and edited your page. I modified the css code and use this instead:

@media(max-width: 767px) {
  .x-section .x-container.marginless-columns {
    display: table;
    table-layout: fixed;
  }

  .x-section .x-container.marginless-columns>.x-column[class*="x-"]{
    display: table-cell;
    margin-right: 0;
    float: none;
    vertical-align: middle!important;
  }
}

Please check your site now.

[ssbukowski]

@RueNel Worked perfect!

Thank you

[ruenel]

You’re welcome!
We’re glad we were able to help you out.