Home>Support>SiteOrigen alignment / gutter/ padding issues

SiteOrigen alignment / gutter/ padding issues

By calin, 10 years ago. Last reply by Andrew Misplon, 10 years ago.
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, I am having trouble making a few things seamless. I have included a link to my test site.

As you can see there are 3 placeholder images that are just colored blocks. Underneath there are 3 buttons. All 6 elements are in 1 PageBuilder row that has 3 columns. 2 widgets per column.

I am trying to accomplish several things here.
First, I would like to remove the gap between the bottom of the image and the top of the button.
Second, I would like to have the 3 columns spaced evenly from the center, as it is currently the colums are split evenly in PageBuilder, but the contents are (I think) aligned left inside each column. Basically I would like them aligned evenly on the centerline of the page.

finally, and a much smaller thing, the row above it is a Vantage Headline and try as I might I cannot remove that pencil thin line below the text.

Any suggestions?

Thanks

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

  1. 10 years, 4 months ago calin

    Forgot to include the link.

    http://help.colesoft.com/new/

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

    Hi calin

    Thanks for your support. The following inserted under Appearance > Custom CSS will resolve the challenges you’ve asked about:

    .no-top-padding .so-widget-sow-image {
text-align: center;
}

.no-top-padding .so-widget-sow-image img {
margin-bottom: -5px;
}

.no-top-padding .textwidget a {
margin: 0 auto;
}

.widget_headline-widget .decoration { display: none; }
  3. 10 years, 4 months ago calin

    Just like before, works perfect.

    Thanks very much.

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

    Super, glad we could help.

    no-top-padding

    is your custom row class, so we’re targeting elements inside that class. Let me know if you need me to run you through any of this.

  5. 10 years, 4 months ago calin

    Andrew, I decided to take you up on your offer here. If you revisit the link above you will see a change, I added an image below the button text.

    In PageBuilder I added another SiteOrigen Image Widget to each column. Since the entire row has the no-top-padding class I assumed the effects would apply to this as well. However there was a gap between the bottom image and middle text. Looking at the CSS you gave me above, I copied the
    margin-bottom: -5px;
    into
    .no-top-padding .textwidget

    This moved it closer. By process of elimination I found that setting it to “-14px” made them flush. This struck me as an odd number and I wanted to see if there is a better way to do this and also where the 14px separation comes from.

    Thanks!

    into the

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

    Yeah, that works. I think where this is coming from is the following global widget styling:

    .widget {margin: 0 0 1.5em;}

    So a better way of handling this might be to reverse that. We have lots of options there. If we wanted to leave 1.5em bottom margin for widgets in the sidebar and footer but remove it for widgets in Page Builder, we could say:

    .panel.widget {margin-bottom: 0;}

    If you inspect the source you’ll see panel and widget classes get applied together, that’s the reason there is no gap between them in the CSS.

    Or to be more specific we might limit things to just our custom class:

    .no-top-padding .widget {padding-bottom: 0;}

    I didn’t test this so I’m not sure if it will negate having to use the negative bottom margin I had before.

    Let me know how it goes.

  7. 10 years, 4 months ago calin

    Andrew,

    I am having trouble making this work. I removed the “margin-bottom: -14px;” I had placed in .no-top-padding and instead tried inserting your suggestions into the custom CSS (one note, your panel.widget code has an incorrect closing bracket). Neither of them seemed to have any effect. Any ideas on what I am doing wrong to get the custom class to work?

    I think that ultimately using the custom class is the best solution. After reading about “em” I tested it out, and since it is based on font size as you increase or decrease the default in your browser the gap will come and go.

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

    Thanks for correcting the bracket close.

    To further correct those two from last night, you either say:

    .panel.widget {
margin-bottom: 0 !important;
}

    OR

    .no-top-padding .widget {
margin-bottom: 0 !important;
}

    Apologies for the mistakes there. It does however look like you’re still need the negative margin to get the effect you’re after. That’s ok though.

    ems are a good idea. Just a quick reminder that they aren’t responsive to browser resolutions, they help out if a user has a text size set in their browser other than the default.

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