Home>Support>Row / widget CSS

Row / widget CSS

I’m trying to understand how to use the individual row / widget CSS features.
I have a page that has two single column rows. Each row has one Visual Editor widget. The first contains text, the second contains an image. I’d like to set the left/right padding of the text so it doesn’t format as one crazy long line.

I know I could make the row have 3 columns and squeeze the VE widget in the middle one, but that seems clunky.

I *think* setting right and left padding of either the entire row, or the widget in the row is the right path, but I can’t figure out which CSS elements to style. Help!

Mike

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

  1. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    Hey MikeP

    I’ve written a thread up on this topic: Thread: How do Page Builder row attributes work – row class, cell class and CSS styles. Hopefully you find that helpful.

    If you can send through a link to the page concerned I’m sure we can help out. Off the top of my head, one option is to assign a class to the row or widget:

    constrained-text
    

    Then under Appearance > Custom CSS target that class we’ve just added. )If you read my thread this should make sense.)

    .constrained-text p {
    display: block;
    margin-right: auto;
    margin-left: auto;
    max-width: 50%;
    }
    

    Just shooting from the hip there. I’d probably need to see the page.

  2. 9 years, 7 months ago MikeP

    That’s perfect, thanks!

  3. 9 years, 7 months ago Andrew Misplon
    Hi, I Work Here

    For sure, glad that helped.

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