Footer not tied to Discourse width

Поддержка
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: : discourse-theme-footer/desktop/desktop.scss at master · pfaffman/discourse-theme-footer · GitHub

Footer: discourse-theme-footer/desktop/footer.html at master · pfaffman/discourse-theme-footer · GitHub

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.

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.

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

Они не находятся внутри контейнера, как вы можете видеть здесь:

joDPRaB
joDPRaB1361×644 46.3 KB

Кстати, вы можете просто добавить:

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

Или, альтернативно, поместите div social-icons внутрь контейнера :wink:

РЕДАКТИРОВАНИЕ: на строке 63 у вас есть </div>, закрывающий footer-col №4, а на строке 64 другой </div> закрывает container. Удалите этот последний div и добавьте его после блока social-icons.

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-11720×1280 59.7 KB

Screenshot_2017-12-26-23-47-50
Screenshot_2017-12-26-23-47-50720×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

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.

11

Thank you @dax, much appreciated :slight_smile: