Home>Support>Remove space between header and row

Remove space between header and row

By Pilar Davis, 9 years ago. Last reply by Magus, 9 years ago.

I have premium. It used to be that you had to add a custom css to remove the space between the header and the first row but then you guys changed that and it because a feature of the updated theme that could be set to a number. I do not see that in one of my websites. I go into layout and there are no options to reduce that spacing.

URL: http://alasheslife.com

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, 4 months ago Magus
    Hi, I Work Here

    Hi Pilar

    Please navigate to Appearance->Custom CSS and click in the snippets button.

    In this section is an entry for Boxed Layout: Remove to Padding. Click on this and click on the insert snippet button.

    This will return you to the CSS Editor where you can change the value to whatever px value you like.

    Hope this helps

    Magus

  2. 9 years, 4 months ago Pilar Davis

    That made the space bigger!! :( It was a small slither. Now it’s a gap. I have it set to 0. What happened to the update that allowed us to go in to the theme settings and actually just click the size of the space between after the header on every page. once you changed it on 1 page it changed it on all other pages as well but at least it worked absolutely.

  3. 9 years, 4 months ago Pilar Davis

    I changed the code to

     .home #main {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    } 

    and that changed it back to the small slither of space, about a quarter of an inch but it should be 0 space. How do you type in 0px and still get a space?

  4. 9 years, 3 months ago Pilar Davis

    Hi again! :)
    So I changed the background of the row to a color instead of white to see if I could tell if it was the row or maybe the content that was throwing off the row being flush. It looks like it’s the content and NOT the row. But I don’t know how that could be. There are no borders around the content, no padding around images or anything. Any ideas? Thanks!!

  5. 9 years, 3 months ago Magus
    Hi, I Work Here

    Hi Pilar

    It looks like the slider is taller than the contained images. Please try resizing the slider height down by 10px.

    Thanks

    Magus

  6. 9 years, 3 months ago Pilar Davis

    What slider? I only have a slider in the header and it is does not go below it’s line. Nonetheless I reduced the size of its height but it made no difference. I’m wondering if it has something to do with some type of automatic padding added to all widgets I add. (i.e. the images, text, etc) It seems as if they have a ton of padding around them that I have not added and are not included in the original text or image.

    Either way, nothing seems to be working. So again I ask, what happened to the feature where you just go into the theme settings and modify the spacing between rows. I’ve used it before and now it’s gone.

  7. 9 years, 3 months ago Pilar Davis

    Ok I stumbled upon something. When the row width is set to standard there is no gap, when it’s set to full width or full width stretched that is when the space appears. I CANNOT have any elements on this site set to standard. The entire website has to be full width. Do you all have any idea why this problem occurs and how to fix it?

  8. 9 years, 3 months ago Pilar Davis

    Sorry to keep adding things but I also stumbled upon, that when I add animation to a picture or text , THAT also adds a space around the whole thing.

  9. 9 years, 3 months ago Magus
    Hi, I Work Here

    Hi Pilar Davis

    I see what you mean now. I apologise but I was under the impression that you were asking about the sliver of pink below the top image.

    The padding is being added by the animation CSS elements. Please try adding the following to your custom CSS

    .layout-full .panel-row-style.panel-row-style-wide-grey, .layout-full .panel-row-style.panel-row-style-full-width {
        padding-top: 0px;
        padding-bottom: 0px;
    }
    
    .animated .alignleft {
        margin: 0px;
    }
    

    This will fix everything apart from the first animated image. The remaining space can be fixed by removing the empty paragraph tags around and below the image which are giving you empty lines top and bottom.

    The bottom margin Setting in PageBuilder for row alignment can be found by navigating to Settings->Page Builder->Layout.

    Let us know how you get on

    Magus

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