Footer not tied to Discourse width

support
1

I’m trying to create a foot something like: https://discuss.newrelic.com/

I snagged the footer I found there, stripped stuff out, and did my best to snag the related CSS. It’s sort-of close, but the width is the whole browser rather than just the part that Discourse is using.

What am I missing?

Example: https://s2.literatecomputing.com/
CSS: : https://github.com/pfaffman/discourse-theme-footer/blob/master/desktop/desktop.scss

Footer: https://github.com/pfaffman/discourse-theme-footer/blob/master/desktop/footer.html

1 Like
2

You missing a div with .container class. Wrap all .footer-col and .social-icons like below

<div class="container">
  <div class="footer-col"></div>
  <div class="footer-col"></div>
  <div class="footer-col"></div>
  <div class="social-icons"></div>
</div>

Also remove the margin (only for div#footer-top) in this line.

7 Likes
3

That seems to have done it. CSS remains a twisty maze of passages that all look alike. It always makes sense when it’s right, but often I can’t guess why it’s wrong.

A thousand thank-yous.

6 Likes
4

Ah, one problem, the Social Icons are outside of the desired margins. I think they’re in the container, but there’s something else I’m missing.

5

They are not inside the container, as you can see here:

btw you can simply add:

.social-icons {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
    max-width: 1170px;
}

or, alternatively, put the div social-icons inside the container :wink:

EDIT : at line 63 you have a </div> that close the footer-col n.4, at line 64 the other </div> close the container. Delete that last div and add it after the social-icons part

5 Likes
6

I’m using a different footer style of my own, how will I make my footer fit with Discourse on mobile

7

I am also having grey boxes in between categories on my forum, incorrect spacing at the bottom

Screenshot_2017-12-26-23-47-11
Screenshot_2017-12-26-23-47-11.png720×1280 59.7 KB

Screenshot_2017-12-26-23-47-50
Screenshot_2017-12-26-23-47-50.png720×1280 48.5 KB

Can you provide information on how to fix this?

8

Using media queries

Share the code you are trying to use

4 Likes
9

Here is the footer code for my forum, Can you provide how to make spacing accurate on mobile Thanks.

10

You have some problems with padding and margin settings in your media query.
Try to change it this way:

@media (max-width: 767px) {
  .footer {
    font-size: 14px;
    padding: 0px;
    margin-top: 0px;
  }
  .footer .footer-left,
  .footer .footer-center,
  .footer .footer-right {
    display: block;
    width: 100%;
    text-align: center;
  }
  .footer .footer-center i {
    margin-left: 0;
  }
  .footer .about {
      padding-left: 15px;
      padding-right: 15px;
      padding-top: 40px;
  }
  .footer .name {
      padding-bottom: 40px;
  }
}

it should work much better.

7 Likes
11

Thank you @dax, much appreciated :slight_smile:

1 Like