Center the text vertically


#1

Hi

How do I center the text vertically in middle row on this page: http://tobiasnielsendesigns.com/doxafilm/
The row, when the picture are at the left side has it is own styling with a class called: push-image-right, which may cause the problems. What can I do here? :slight_smile:

Regards Tobias


#2

Hello there,

In the row settings, expand the Layout tab located at the right side, on “Cell Vertical Alignment” dropdown, select Center.

Regards,
Kharis


#3

Hi Kharis

The second row dosn´t work like the other 2. It might be because it have a class called .push-image-right with display: block, which is not on the other 2. Without that is work’s fine. That is for pushing it to the right in full size, but that causes a problem at lower resolutions.
What can I do to still make it vertical alligned?

Regards Tobias


#4

Hello there,

You’re correct. It looks like there’s CSS conflict when .push-image-right class persists. To fix it, try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 781px) {
      #pg-w5b237eb746b51-0.panel-grid {
        max-width: 100% !important;
      }
      .push-image-right {
        display: flex !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
      .push-image-right > .panel-grid-cell {  
        width: 50% !important;
      }
      .push-image-right > .panel-grid-cell:nth-of-type(1) {
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%);    
      }
      .push-image-right > .panel-grid-cell:nth-of-type(2) {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%);    
      }  
    }

This is actually an issue with the Page Builder plugin – not Sydney theme. I’ll report it to the author of Page Builder. Let’s if there would be a permanent fix for it.

Regards,
Kharis


#5

Hi Kharis

When copying the second and third row for creating the “customer stories” at the bottom the rows get separated again. What can I do now?

Regards Tobias


#6

#pg-w5b237eb746b51-0 is actually the ID name which wraps the .push-image-right row. This ID name is dynamically changed as the rows composition in the same page edited. You should match the ID name whenever did rows editing. You can find it with the help of web browser’s inspector tool. Here’s the ID name located.

Regards,
Kharis


#7

Hi Kharis

It works as it should now. When I removed margin left and right from the class: “push-image-right”, the rows get together again. Thanks for that :slight_smile:

Regards Tobias


#8

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis