El pie de página no está alineado con el ancho de Discourse

Soporte
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

No están dentro del contenedor, como puedes ver aquí:

joDPRaB
joDPRaB1361×644 46.3 KB

Por cierto, simplemente puedes agregar:

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

O, alternativamente, coloca el div social-icons dentro del contenedor :wink:

EDIT: en la línea 63 tienes un </div> que cierra el footer-col n.º 4, y en la línea 64 otro </div> cierra el container. Elimina ese último div y agrégalo después de la parte de 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: