This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Hero image widget top and bottom margin/padding

Open 4 replies premiumthemetheme-vantage
timiambeing
10 years ago · Last reply by Magus 10 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.

Need fast email support? Get SiteOrigin Premium

Replies

4
  1. timiambeing 10 years, 7 months ago

    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. Magus Staff 10 years, 6 months ago

    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. timiambeing 10 years, 6 months ago

    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. Magus Staff 10 years, 6 months ago

    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.

Have a different question or issue?

Start New Thread