Fußzeile nicht an Discourse-Breite angepasst

Unterstützung
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 „Gefällt mir“
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 „Gefällt mir“
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 „Gefällt mir“
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 „Gefällt mir“
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 „Gefällt mir“
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 „Gefällt mir“
11

Thank you @dax, much appreciated :slight_smile:

1 „Gefällt mir“
12

This topic was automatically closed after 2355 days. New replies are no longer allowed.