التذييل غير مربوط بعرض Discourse

الدعم
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: