Home>Support>Centring text vertically

Centring text vertically

Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hi Im new to this builder, so sorry for simple questions but i didn’t find solution yet. Ive got theme that has PB included but Im bit confused how this page builder work. With this system I’m not able to vertically centre text at all. Flex box or position relative-absolute is not working for me. I had tried many ways to set column to wokr for me but without success. My problem is that I set up two columns row and into each column will place Page Builder or image and text. But problem is when I try REL-ABS 50top/50left option second column is still relaying on main wrapper (mean row) this mean is going over first column. I have tried even put second PB into first. So Im sock with this basic thing. Can anyone experience with this system help me out? Or where i find comprehensive manual I can go thru because Im bit lost with other things too?

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Hi Finediv

    Thanks for posting. You can find our Page Builder documentation, including videos here: Page: Getting Started With Page Builder. There isn’t currently a way to vertically center text in Page Builder or SiteOrigin widgets using native settings.

  2. 8 years, 10 months ago Private Message - finediv

    This is a private message.

  3. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Thanks for your reply. There isn’t anything unique about Page Builder’s formatting that prevents you from using Custom CSS to change elements. You can either target existing ID’s and class names outputted by Page Builder or you can use the row and widget attributes fields to insert your own ID and class names.

    (If possible, please, keep Private Replies for sending sensitive info such as URLs, it helps keep the forums readable. Thanks.)

  4. 8 years, 10 months ago finediv

    Hi Andrew
    there is no way to use flex-box or rel-abs values to centre text like i wrote, at least it’s not working for me. May you please point me on example where flex or rel-abs is in use on SiteOrigin builder? When I programming just in pure HTML-CSS-JS I have no problem to use those values, but it seems that builder is ignoring them. True is that i didn’t try to use !important to figure out if this will work but this is no option for me. I just want to write code and Im expecting it work as usual.

    Thanks for any advice

    Stan

  5. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Hi Stan

    Unfortunately, we aren’t able to assist with custom development within our support scope. If you have a working example I can take a quick look and perhaps advise you on why your implementation isn’t working.

    Page Builder is outputting HTML and CSS, there isn’t anything preventing custom CSS or JS from working as it should. Here is an example of flexbox. It’s just one way of implementing custom CSS, totally up to you how you do it, lots of choices.

    01

    02

    03

  6. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Summary: Please, if you have one, send a link to your example so far and I’ll check it out. Thanks :)

  7. 8 years, 10 months ago finediv

    Hi Andrew
    thanks to clarify where to place code, but trust me I had try many ways even this and didn’t work for me. I don’t know why but now is working. I find that builder doesn’t show changes (Preview Changes) until page is “updated”. Second thing is when i place code into style.css it doesn’t work it has to be in builder CSS editor. Because of all those problems I was using mehod with border and backgound to see what is happening and I have discovered strange behaviour. Now I have flex-box code for widget in style.css that is working, but basic thing like background-color or border wont work until i place those in Atribute CSS editor. Im really confused what happening.

    When I give row a class and place code for this class in sytlesheet nothing happened, but when i clean row class and place code in attribute section suddenly code start to work(like I said not on preview but only after page update). Probably this was reason why I miss in first place that code is working, I just didn’t update page so I have not see any changes. I would like to upload img attachment for this strange behaviour but i didn’t find option to add files.

  8. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Thanks for your feedback.

    Changes not showing in Preview: not sure about that. It could be caching, perhaps best to Save and check.

    Changes not working from style.css: Unlikely to be Page Builder related, most likely issues with CSS specificity or similar challenges.

    Unfortunately, there is only so much support we can offer for custom development like this. If you send me a link for a case where you have a CSS rule in style.css that is not working I will take a look.

  9. 8 years, 10 months ago finediv

    HI Andrew
    Changes not showing in Preview: When i WP activte “Preview Changes” without saving page changes aren’t made, mean that after any change i have to update (save) page for changes to be applied.

    Changes not working from style.css: Like I said – I ve add one row in plain test page and add class row-text into Attribute field “Row Class” and place text editor into it with class “centre-text”. In style.css i’ve set border and background for this row. After saving page (“preview changes” is not working for me) style for row wasn’t applied but style for widget work fine. To apply this testing style for row I had to place it into row Attribute CSS Style editor.

    Stan

  10. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    I’d need to see the page to help further. You can definitely target classes or ID’s from your child style.css file or a Custom CSS plugin as I did the image example above. If you’d like me to help further I’d need to see the page with the rule in style.css and the row class name set.

  11. 8 years, 10 months ago finediv

    Hi Andrew
    It’s Ok, I’m on Localhost and website is almost done. Yep, i’m targeting right classes (at least I thing that after few years developing i’m able to do it :) ). I was also thinking about cache but i have it off (in Safari development settings). It just take more time to go around what is not working for me.

  12. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    When you check the developer console and inspect the class you’re expecting the style.css rule to be impacting, can you see your rule at all in the right sidebar?

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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More