Home>Support>Hero image widget top and bottom margin/padding

Hero image widget top and bottom margin/padding

By timiambeing, 9 years ago. Last reply by Magus, 9 years ago.

I love the new Hero widget, it scales much better than sliders which get tiny in mobile devices – but – when I replace my sliders with hero’s they all have a top and bottom margin/padding I can’t seem to get rid of anywhere? The sliders used to butt right up against the menu and not leave a gap before the next panel which looked great interspersing ‘wide-grey’ and normal panels going down the page, but these now have a margin between them. I have tried all the settings I can find in the widget itself and the row settings but it’s pretty stubborn this margin! :)

Can you help please?

This shows new hero with margins – http://www.aegisaccounting.co.uk
This shows old slider all neat without gaps – http://www.aegisaccounting.co.uk/start-ups/

Many thanks

URL: http://www.aegisaccounting.co.uk

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, 2 months ago timiambeing

    When using the ‘inspector’ mode of Safari it shows quite clearly a 25px top and bottom padding around the image in my hero widget when I look here in ‘metrics’ mode (I have no idea what I’m doing though!):

    <div class="siteorigin-panels-stretch panel-row-style" data-stretch-type="full-stretched"
    

    – but that code when expanded shows no padding so it must be inheriting it from somewhere? Way above my head, just though this might help! :)

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

    Hi Timiambeing

    The setting is being inherited from this entry

    .layout-full .panel-row-style {
        margin: 0 -1000px;
        padding: 25px 1000px 25px 1000px;
    }
    

    to override without affecting all the full width rows please add the following to Appearance->Custom CSS

    #pg-37-0 .panel-row-style {
        padding-top: 0px;
        padding-bottom: 0px;
    }
    

    Let us know how you get on

    Magus

  3. 9 years, 2 months ago timiambeing

    Thanks thats amazing, works great, I never realised you could effect certain pages!! Actually I’m substituting Heroes for Sliders (sounds like a computer game!!) pretty much everywhere and I think these are the only places I use full width stretched so I removed the page designator for the moment :)

    Just in case you do pop by again – it would be great to have a list of the CSS classes like ‘wide-grey’ (which I use all over the place as it used to be your default when there was a list to choose from in PageBuilder) as I am sure there are other row styles I coul play with and find very useful!

    CSS – I think I need a master class it it looks like the major way to effect the site overall at a stroke!! :)

  4. 9 years, 2 months ago Magus
    Hi, I Work Here

    Hi Timiambeing

    Unfortunately we do not have a list of classes available. The best option would be to view the contents of the themes style.css which you can access via Appearance->Editor. Please remember not to make any changes to this file as any changes made would be lost during an upgrade.

    A good place to start with CSS would be here

    https://css-tricks.com/

    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