This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

vertically centre a text widget

Resolved 4 replies premiumthemetheme-vantage
See You
11 years ago · Last reply by shahone 10 years ago

I have installed the Vantage theme, and the Page Builder.
I use rows with 2 columns. On the right column I use an Image (PB) widget. On the legt column I use a text widget. The picture widget is bigger than the text widget. Is there a way to vertically centre the text widget to the picture?
This is my homepage: http://www.easymount.at/Wordpress/montageanleitung/
Thanks for your help
Br Christian

URL: http://www.easymount.at/Wordpress/montageanleitung/

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

4
  1. Greg Priday Staff 11 years, 5 months ago

    Hi See You

    Unfortunately vertically aligning using CSS is notoriously difficult. It’s something I’d like to implement in Page Builder, but haven’t been able to find a good solution.

    At the moment the only solution would be to use custom CSS to add a top margin to cells. You’d need to find the cell ID for each cell and then add a top margin. I can point you in the right direction for this, but you’ll need to be familiar with CSS and HTML to actually implement it.

    You’ll need to familiarize yourself with the Chrome inspector tool and the Custom CSS editor – https://siteorigin.com/basics/modifying-theme-design-with-custom-css/

    Then you’ll need to find the cell IDs of the text cells and add top margins. Something like this.

    #panel-103-2-0-0 {
   margin-top: 80px;
}

    To make this all responsive, you’ll also need to add media queries to get rid of the top margin on mobile devices.

    Sorry there isn’t an easier solution.

  2. Will Webb 10 years, 10 months ago

    Hello Greg,

    I don’t suppose you have found a solution to this yet? I am still using the css work around for time being and using media queries to eliminate as you stated.

  3. shahone 10 years, 28 days ago

    Hi,
    is there any new solution regarding vertical alignment or vertical centering of text / image in a page-builder row?

    If not, can percentages be used, in CSS as follows, for vertical centering instead of padding in pixles?

    #parentdiv {
    /* … */
    }
    /* text / image to be vertically centered */
    #childdiv {
    position: relative;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    }

    Thanks in advance!

    Hamza

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread