Home>Support>Corp theme – Centre align footer

Save 30% on SiteOrigin Premium for this week only. Use coupon code NOVEMBER30 at checkout Buy Now

Corp theme – Centre align footer

Hi there,

I’m using your Corp theme – to which I’ve added a row with 8 widgets (social icons and text links)
by adding the SiteOrigin layout widget to > wp-admin/widgets.php > footer.

I’ve been though many posts on here re. the footer centring, and tried various code but
it’s not working for Corp theme.

I wonder if you have any custom code I can add that will effectively centre all the
widgets in the footer area?

Thanks greatly for your time in terms of any assistance with this.

Kind regards, V.

This is a free community support forum. Replies are not guaranteed. If you need professional email support, please purchase a SiteOrigin Premium license.

  1. 4 months, 8 days ago Violetta

    I’ve looked at this further and it seems quite problematic.

    None of the standard code for css centring seem to work,
    as detailed here: https://css-tricks.com/centering-css-complete-guide/

    Is this something specific to the SiteOrigin plugin?

    Kind regards, Violetta

  2. 4 months, 8 days ago Andrew Misplon Hi, I Work Here

    Hi Violetta

    Thanks for posting.

    There isn’t really any standard CSS code. You could use the examples on CSS Tricks but you’d need to inspect your site and change the selector names in your CSS rules. It isn’t possible to copy/paste rules without doing that and have the rules take effect.

    Please, share a link to your site so we can take a look.

    Are you attempting to center the contents within each of your eight widgets?

  3. 4 months, 7 days ago Violetta

    Dear Andrew,

    Thanks so for your help with this.

    “you’d need to inspect your site and change the selector names in your CSS rule”

    = Yes, I have been doing this, but what I meant above is that I have found it
    extremely difficult to work out which of class or id selectors are needed to modify
    the footer widget area and widgets inside it.

    This maybe because the the SiteOrigin plugin creates a lot of non-descriptive
    class names, for example: class=”panel-widget-style panel-widget-style-for-w5b462886061c0-0-0-0″,

    If you get what I mean there…

    Also, even if I do select them on some level, none of the centring code from css tricks)
    works.

    The widget footer area I refer to seems to be somehow aligned right for some reason,
    which stops any attempt centre it.

    The site I refer to is currently under development and I have ‘maintenance mode’ running
    – so you can’t see it from the front end logged out.

    I’d like to send you some screenshots and a copy of the code to see, but I can’t
    see an option in the forum reply box here to make the message private.

    Hang on will try this next… (/adminze ?)

    best wishes, Violetta

  4. 4 months, 7 days ago Violetta

    Does this make the message private?

  5. 4 months, 7 days ago Violetta

    If so, I will send you my code / infos?

    Let me know.

    Thanks greatly.

  6. 4 months, 7 days ago Andrew Misplon Hi, I Work Here

    Hi Violetta

    Do you need a Layout Builder widget in your footer? If you insert eight widgets into the footer widget area, the footer will automatically create eight columns. If you’d like to simplify the markup, that’s the best way to do that. Unless you’re creating multiple rows in a column, the Layout Builder isn’t required.

    That said, additional markup added by the Layout Builder wouldn’t prevent rules from taking effect assuming the correct selectors were targetted. It isn’t necessary to use the non-descriptive class names mentioned. Each widget would still have a standard recognizable class name available.

    I’d be happy to take a look. Unfortunately, assistance with Custom CSS isn’t possible using screenshots. If you’d like to open your site and send a URL we can inspect the problem.

  7. 4 months, 7 days ago Violetta

    “Do you need a Layout Builder widget in your footer? If you insert eight widgets into the footer widget area, the footer will automatically create eight columns. If you’d like to simplify the markup, that’s the best way to do that. Unless you’re creating multiple rows in a column, the Layout Builder isn’t required.”

    = Thanks Andrew, that’s very helpful – maybe it’s related to the layout builder in that location.

    I haven’t had issues with centring other areas of the site/ page with it though, other than this problem with the footer.

    “…wouldn’t prevent rules from taking effect assuming the correct selectors were targetted.”

    = yes, it may be just that I’m not targeting the right one(s) – sure.

    ” If you’d like to open your site and send a URL we can inspect the problem. ”

    = ** Ok, thanks greatly – I’ll open the site and message you back, whenever I see you reply here.

    Is there an option in this forum to set replys to ‘private’ at all?

    bet wishes, V.

  8. 4 months, 7 days ago Andrew Misplon Hi, I Work Here

    Sounds good.

    Unfortunately, we’ve removed private replies for free support, the feature was unfortunately misused.

  9. 4 months, 7 days ago Violetta

    Aha, ok, I have put it online now.

    It’s here > http://www.sickbacchus.com

  10. 4 months, 7 days ago Violetta

    The footer area I’m having issues entering is the where the social media icons and
    privacy etc is at the bottom.

  11. 4 months, 7 days ago Violetta

    The footer area I’m having issues centring is the where the social media icons and
    privacy / press kit etc…. is at the bottom.

  12. 4 months, 7 days ago Andrew Misplon Hi, I Work Here

    The challenge of trying to fix it from this position is Page Builder uses Flexbox and there is percentage padding being used on top of that. It’s a lot to work with. If there is only one row in the footer then I’d recommend taking the time to redo the footer outside of a Layout Builder. Unfortunately, it has to be re-built. It isn’t currently possible to drag widgets out of the Layout Builder into a theme widget area. If you’d be up for that, it would greatly simplify the task.

  13. 4 months, 7 days ago Violetta

    = when you look at that footer on different screen sizes (iPad/ iPad pro/ 1920 x 1080 etc)
    it’s jumping all over the place.

  14. 4 months, 7 days ago Violetta

    Aha, Flexbox – though so somehow.

    Sure I can rebuild it just using 8 widgets instead of the layout builder.

    I’d do this in the same footer widget area of the dashboard – yes?

    If I redo it minus the layout builder is there a simple way I can than keep it centred ?
    Code etc? which method?

  15. 4 months, 7 days ago Violetta

    ** Btw. I was attempting to build something like the footer here for reference:

    http://sonyclassics.com/happyend/

    It does not need multiple lines like that one right now though – just
    what is there now will do, so long as I can centre it.

  16. 4 months, 7 days ago Andrew Misplon Hi, I Work Here

    If you add widgets directly to AppearanceWidgetsFooter we can assist further with layout etc.

  17. 4 months, 7 days ago Violetta

    Ok, thanks greatly Andrew. I’ll get back to when I’ve rebuilt it and given it
    a go myself.

    Thanks for the great support – I’m glad I chose to use SiteOrigin.

    Very best wishes

  18. 4 months, 7 days ago Andrew Misplon Hi, I Work Here

    For sure. Chat further then :)

  19. 4 months, 4 days ago Violetta

    Hi there Andrew,

    I’ve built this now, and had a go at centring it.
    Not sure if I’ve done it correctly though (?)

    Seems a lot better anyhow.

    Just reply to this message again when you’re available,
    and I’ll put the site on line / show you as before.

    Thanks so for your help with this

    Kind regards, Violetta

  20. 4 months, 4 days ago Violetta

    oh, btw. I now have an issue where all the menu items are overlapping on one spot on mobile
    for some reason – not worked this one out yet, may be under the @Media css etc…

  21. 4 months, 4 days ago Andrew Misplon Hi, I Work Here

    We’re online, thanks.

  22. 4 months, 4 days ago Violetta

    Hi Andrew – site is online now > https://wp.me/P9RP4e-1m

  23. 4 months, 4 days ago Andrew Misplon Hi, I Work Here

    Thanks.

    So the footer is all good now?

    I don’t see any issue with the menu on mobile.

    If you want to change when the mobile menu applies you can adjust the collapse point: Page: Navigation

  24. 4 months, 4 days ago Violetta

    Ok, well – two questions…

    1. I’m wondering if I’ve centred the footer correctly there.

    2. When I look at the site under developer > responsive design mode
    then viewing it as iPhone 6/ 6s/ SE etc, the footer items area all overlapping on the same spot
    on the left-hand side of the footer.

    I also checked and it’s the same in firefox in responsive view.

    Any idea how to fix this ?

  25. 4 months, 4 days ago Violetta

    I did not mean the top/ main navigation menu – that is fine, yes.

    I referring to how the footer items overlap on mobile.

  26. 4 months, 4 days ago Andrew Misplon Hi, I Work Here

    Ok, I see the problem.

    There is only so much we can do to assist with customization like this, I’ll do what I can but our scope is limited.

    Consider removing this rule entirely:

    .site-footer .widgets .widget a {
    position: fixed !important;
      _position: absolute !important;
    	bottom: 0 !important;
     _top: expression(eval(document.body.scrollBottom));
    	z-index: 100;
    	box-sizing: content-box;
    }

    Edit each widget and deselect the option to automatically add paragraphs.

    Add to Custom CSS:

    .site-footer .widgets .widget {
        text-align: center;
        margin-bottom: 0;
    }

    You can choose whether or not to use the bottom-margin: 0; declaration I’ve added.

  27. 4 months, 4 days ago Violetta

    Thanks greatly, so you think it’s this rule that is causing the items overlap
    on mobile?

    .site-footer .widgets .widget a {
    position: fixed !important;
      _position: absolute !important;
    	bottom: 0 !important;
     _top: expression(eval(document.body.scrollBottom));
    	z-index: 100;
    	box-sizing: content-box;
    }

    The problem with that is that I need that code to set the footer as a fixed position/ “sticky footer”

    Trying your recommendation now anyhow – thanks Andrew

  28. 4 months, 4 days ago Violetta

    Ok, I tried what you gave above, but it’s not really an improvement
    – as it removes the sticky footer layout, then on mobile the footer items
    are all just stacked vertically at the bottom of the page.

    So that’s not working…

    I’d like to maintain the current footer layout/ position but fix that issue
    with the footer items overlapping on mobile – maybe that’s more involved though?

    If you know of a way to fix this, but can’t get into it here as it’s free support
    – just let me know and I’ll make a subscription ok ^^

  29. 4 months, 4 days ago Andrew Misplon Hi, I Work Here

    If you add your rule back, it shouldn’t be necessary to make every link fixed positioned. You can apply the rule to: .site-footer

    .site-footer {
        
    }
  30. 4 months, 4 days ago Andrew Misplon Hi, I Work Here

    Vertical stacking is the expected behavior on mobile, I’m not sure what else you’d like to do given the number of widgets.

    The other option would be to put all of your links into a single Text widget. In your CSS you’d then say:

    Here you’d make your footer sticky:

    .site-footer {
    }

    Then within the footer you’d deal with your links by making them inline-block:

    .site-footer span {
        display: inline-block;
    }

    That assumes each icon etc was wrapped in a span tag.

  31. 4 months, 4 days ago Violetta

    Great – I think I understand most of that, I’ll give this suggestions a try.

    Seems quite tricky, sorry if so.

    “Vertical stacking is the expected behavior on mobile, I’m not sure what else you’d like to do given the number of widgets.”

    = I was aiming at the same behaviour as the footer items in this example site
    I gave earlier: http://sonyclassics.com/happyend/

    I kind of did this earlier – even though the items were rather tiny –
    but the ‘overlapping items issue’ made a mess of it.

    Thanks Andrew, best wishes

  32. 4 months, 4 days ago Violetta

    I’ll try this suggestion below on a new widget – thanks >>

    The other option would be to put all of your links into a single Text widget. In your CSS you’d then say:

    Here you’d make your footer sticky:

    .site-footer {
    }
    Then within the footer you’d deal with your links by making them inline-block:

    .site-footer span {
    display: inline-block;
    }
    That assumes each icon etc was wrapped in a span tag.

  33. 4 months, 4 days ago Andrew Misplon Hi, I Work Here

    Sounds good, it should help :)

  34. 4 months, 3 days ago Violetta

    Hi there Andrew

    I did all you recommended above – i.e put in one widget etc – and
    it fixes the overlapping issue.

    All I need to work out is how to centre all the footer items again now ?

    Currently they are all aligned to the left – as it’s the default position for the
    first widget I suppose.

    I’d be most grateful if you can suggest a way of doing this.

    Best wishes, Violetta.

  35. 4 months, 3 days ago Violetta

    site online here > https://wp.me/P9RP4e-1m

  36. 4 months, 3 days ago Andrew Misplon Hi, I Work Here

    To the .site-footer { } rule you must add:

    text-align: center;
    width: 100%;

    You’d also need to add a new rule:

    .site-footer span:last-of-type {
    	padding-right: 0;
    }
  37. 4 months, 3 days ago Violetta

    Thanks greatly Andrew. Trying that now….

  38. 4 months, 3 days ago Violetta

    Thanks, that seems to do it at last.

    I just need to also add the following for mobile so the footer items
    did not line break at the break point on iPhone etc

    @media (max-width: 480px) {
    .site-footer span {
    padding-right: 1.6em;
    }
    }

    Seems to do the job ok, outside of the items ‘stacking’ in two equal divs
    like in the example site I gave.

    best, V.

  39. 4 months, 3 days ago Andrew Misplon Hi, I Work Here

    Glad to hear you’ve made progress :)

    All the best.

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