# Easy Responsive Footer
**URL:** https://meta.discourse.org/t/easy-responsive-footer/95818
**Category:** Theme component
**Tags:** official, easy-responsive-footer
**Created:** [August 28, 2018, 8:19am UTC](https://meta.discourse.org/t/easy-responsive-footer/95818 "2018-08-28T08:19:17Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [August 28, 2018, 8:19am UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/1 "2018-08-28T08:19:17Z")
| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Easy Responsive Footer** will allow you to build a fully-responsive footer using nothing but plain text. |
| š | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/easy-responsive-footer) |
| š | **Repository Link** | [https://github.com/discourse/Discourse-easy-footer](https://github.com/discourse/Discourse-easy-footer) |
| š | **New to Discourse Themes?** | [Beginnerās guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
> [@](#):
>
> :discourse2: As this is an #official theme component maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started. š
>
> [ā **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=easy-repsonsive-footer "Ask for support on configuring and using Easy Responsive Footer") [š **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=easy-responsive-footer "A bug report means something is broken, preventing normal/typical use of the theme component") [š **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=easy-responsive-footer "Discussion about the user interface of Easy Respinsive Footer, and how features are presented (including language and UI elements)") [š” **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=easy-responsive-footer "Discussion about how existing Easy Responsive Footer features can be improved or enhanced, and how proposed new features could work")
### Features
Desktop
Mobile
### Settings
| Name | Description |
| --- | --- |
| heading | Text for the heading in the footer - you can use your site name for example - Max length 25 characters |
| blurb | Enter a short blurb about your community - Max length 180 characters |
| sections | Sections to be displayed in the footer |
| small links | Small links at the bottom of the footer like Terms of Service and Privacy |
| social links | Social links youād like to add to the footer |
| show footer on login required page | Check this setting if you want the footer to be displayed on the login-required page (only applies if your site is private) |
| svg icons | List of FontAwesome 7 icons used in the social links setting above. |
There are six settings in this component that will help configure it easily
**1. Heading**
Text for the heading in the footer - you can use your site name for example - Max length 25 characters
**2. Blurb**
a short blurb about your community - Max length 180 characters
**3. Link sections**
Add link sections. The ideal number of sections is six. One item per line in this order: Text, title
Text: what appears on in the footer
Title: the text that appears when the item is hovered.
**4. Links**
Add links to link sections. One item per line in this order:
Parent, text, URL, target, title
It is a good idea to keep the number of links under each section similar
Parent: the name of the parent section which this link shows under. Use the `text` value from the list above
Text: the text that shows for this link
URL: the path this item links to. You can use relative paths as well.
Target: Choose whether this item will open in a new tab or in the same tab. Use blank to open the link in a new tab, or use self to open it in the same tab.
Title: the text that shows when the link is hovered.
**5. Small links**
You can add small links at the bottom of the footer like Terms of Service and Privacy. One item per line in this order:
Text, URL, target
Text: The text that shows for the small link
URL: The path of the link
Target: Use blank to open the link in a new tab and use self to open it in the same tab
**6. Social links**
Enter the social links youād like to add to the footer in this format:
provider, title, URL, target
Provider: is the name of the provider like Facebook or Twitter
Title: The text that shows when the link is hovered
URL: The path youād like the link to have
Target: Use blank to open the link in a new tab and use self to open it in the same tab
### Notes
1. I left the placeholder items as defaults for the component so you can easily see what your settings should look like.
2. This component will use your themeās color scheme to generate the colors used for the elements in it. but all elements have unique classes added to them in case you want to override something.
3. Since this component uses theme settings, it means that I can update it in the future to either fix or improve it and the data you enter would not be lost š
> :discourse2: **Hosted by us?** Theme components are available to use on our Pro, Business, and Enterprise plans.
> Last edited by @Moin 2026-04-30T11:36:43Z
>
> > **Check document**
> >
> > Perform check on document:
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [November 29, 2020, 12:24pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/109 "2020-11-29T12:24:34Z")
I pushed some fixes.
Key changes:
- the component now uses CSS variables, so itās dark-mode compatible
- some fixes to media queries to fix the bug @mbauman reported
- added a setting that allows you to control whether or not the footer is displayed on login-required pages
[https://github.com/discourse/Discourse-easy-footer/commit/a694b1ba8e31d5b24b2d0fd8e2b6190bf987527b](https://github.com/discourse/Discourse-easy-footer/commit/a694b1ba8e31d5b24b2d0fd8e2b6190bf987527b)
> [@rolando](#):
>
> i have made my `.wrap` wider (1200px) with media queries so that after a certain resolution it makes the forum wider. if i enable the responsive footer it makes the `.wrap` narrower (1100px) but only the āboard partā and not the `.d-header .wrap` nor the `.footer` which stay at (1200px). as soon as i disable the responsive footer everything looks wider (1200px) as intended.
The cause here is [CSS specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity). Your CSS targets `.wrap`, and it works, but this component also has some CSS that targets `#main-outlet` and adds some properties to it to keep the footer at the bottom even on short pages.
[Discourse-easy-footer/common/common.scss at main Ā· discourse/Discourse-easy-footer Ā· GitHub](https://github.com/discourse/Discourse-easy-footer/blob/master/common/common.scss#L106-L113)
The `#main-outlet` selector is more specific than your `.wrap` selector - because itās id-based, so it overrides your styles.
You can fix this by adding this CSS
```scss
#main {
#main-outlet {
width: 1200px; // or whatever width you want to use
}
}
```
> [@Edward\_Legaspi](#):
>
> Hi. Is there a way to limit the number of footer columns to 3?
Sure, remove all the extra columns that you donāt need in the settings, and youāll get three columns.
> [@PoojaPatel](#):
>
> After update getting error in chrome console that as below.
I cannot reproduce this issue, but the error implies that your settings are incorrect. Can you double-check and make sure that youāve followed the instructions under each setting? If your problem persists, can you share a link to the site you see the issue on?
* * *
I did a bit of cleaning up and deleted the replies for bugs that will be fixed once you update the component. If your issue persists, feel free to post about it again.
---
### Author:  [@dadberg](https://meta.discourse.org/u/dadberg)
#### Post date: [February 9, 2021, 11:41am UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/112 "2021-02-09T11:41:35Z")
I wonder if the header text (This is a header) within [Easy Footer Theme Component by Joe] can be replaced with logo.
Iāve tried exporting the component to alter hbs files, but Iāve failed, I think I need some hints.
Any insight is much appreciated āŗ
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [February 9, 2021, 1:17pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/113 "2021-02-09T13:17:56Z")
Depending on what you want to do, you can simply try something like this:
- in the Easy responsive footer theme settings delete the text inside the `Blurb` setting. If you want you can delete even the text inside the `Heading` setting.
- create a new theme component and add in the `Common > CSS` tab
and the result will be something like this:
---
### Author:  [@dadberg](https://meta.discourse.org/u/dadberg)
#### Post date: [February 9, 2021, 1:43pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/114 "2021-02-09T13:43:53Z")
Solved!
My belief in in the open source echo system is initially empowered by great people like you.
---
### Author:  [@Jcava5](https://meta.discourse.org/u/Jcava5)
#### Post date: [April 2, 2021, 12:02am UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/122 "2021-04-02T00:02:59Z")
There should be an option to customize the colors of the background and text with CSS. By default, it doesnāt match the header.
Otherwise it works great! Thanks!
---
### Author:  [@thaidb](https://meta.discourse.org/u/thaidb)
#### Post date: [April 2, 2021, 8:10am UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/123 "2021-04-02T08:10:41Z")
hello Joe, can weadd more widget same here
---
### Author:  [@b481](https://meta.discourse.org/u/b481)
#### Post date: [May 4, 2021, 9:43am UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/126 "2021-05-04T09:43:47Z")
This has resulted in the logo appearing in the blurb:before of search results, even after I specified this in the component
```
div.below-footer-outlet.custom-footer.ember-view > div.wrap > div.flexbox > div.first-box > .blurb::before {
background-image: url(image url);
}
```
Is there any way to make sure it doesnāt appear in search results, but still appears in the footer?
---
### Author:  [@littleviolette](https://meta.discourse.org/u/littleviolette)
#### Post date: [August 28, 2021, 5:42pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/132 "2021-08-28T17:42:23Z")
Thank you for the awesome footer! I have been having issue showing the [Tiktok logo](https://fontawesome.com/v5.15/icons/tiktok?style=brands) from Font Awesome. I have tried adding `fab-tiktok`, `fa-tiktok`, `fas-tiktok`, `tiktok` to the svg icons setting, but none of them renders the tiktok logo.
Thank you for your help!
---
### Author:  [@bekircem](https://meta.discourse.org/u/bekircem)
#### Post date: [September 14, 2021, 10:29pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/136 "2021-09-14T22:29:24Z")
I want to change the 25 character limit for the title. I will place the title with CSS. What is the easiest way to do this?
---
### Author:  [@keegan](https://meta.discourse.org/u/keegan)
#### Post date: [September 14, 2021, 11:45pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/137 "2021-09-14T23:45:45Z")
@bekircem
Going beyond the character limit may break some things, but you can try:
```css
.custom-footer .first-box .heading {
visibility: hidden;
}
.custom-footer .first-box .heading::after {
content: "This is something that is longer than 25 characters";
visibility: visible;
display: block;
}
```
Doing `visibility: hidden`, however, will still keep the white-space. However, depending on how large your title will be you can try doing this instead:
```css
.custom-footer .first-box .heading {
visibility: hidden;
position: relative;
}
.custom-footer .first-box .heading::after {
content: "This is something that is longer than 25 characters";
visibility: visible;
display: block;
position: absolute;
top: 0;
}
```
---
### Author:  [@bekircem](https://meta.discourse.org/u/bekircem)
#### Post date: [October 20, 2021, 10:20pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/138 "2021-10-20T22:20:46Z")
Is that possible to add texts to link sections without href attribute?
---
### Author:  [@IAmGav](https://meta.discourse.org/u/IAmGav)
#### Post date: [October 20, 2021, 10:50pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/139 "2021-10-20T22:50:58Z")
Just add an # where the url goes
---
### Author:  [@bekircem](https://meta.discourse.org/u/bekircem)
#### Post date: [October 20, 2021, 10:52pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/140 "2021-10-20T22:52:21Z")
In this case it still appears as a clickable url. Is there a way to add without getting the a tag?
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [December 9, 2021, 10:51am UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/142 "2021-12-09T10:51:30Z")
> [@bekircem](#):
>
> Is there a way to add without getting the a tag?
You can add this CSS to your theme somewhere
```css
.custom-footer a[href="#"] {
pointer-events: none;
}
```
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [December 15, 2021, 2:26pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/149 "2021-12-15T14:26:41Z")
I submitted this:
[https://github.com/discourse/Discourse-easy-footer/pull/12](https://github.com/discourse/Discourse-easy-footer/pull/12)
That should fix a deprecation with missing puginId. I didnāt test it ~~, but it looks right to me.~~
EDIT: But itās not right at all.
---
### Author:  [@umbergerba](https://meta.discourse.org/u/umbergerba)
#### Post date: [February 8, 2022, 5:01pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/160 "2022-02-08T17:01:48Z")
FYI BUG \>\>\> If I add the following ā¦ āCommunity, Tags List, /tags, self, List of all Tagsā ā¦ a horizontal rule is displayed on the frontend. If I remove the [space] between āTags Listā and change it to āTagsListā the HR goes away.
---
### Author:  [@mkschulze](https://meta.discourse.org/u/mkschulze)
#### Post date: [February 12, 2022, 10:14am UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/161 "2022-02-12T10:14:34Z")
Hello, I have two problems with the social links and Fontawesome Icons.
1. I try to setup other Fontawesome 5 Icons in the Social area, but they do not show up.
I want ``
2. I setup the GitHub link and it already shows the icon on page, although I actually didnāt add the Icon in the list of svg-icons.
**EDIT: solved it by just using the icons name āhomeā**
---
### Author:  [@AquaL1te](https://meta.discourse.org/u/AquaL1te)
#### Post date: [May 7, 2022, 4:58pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/162 "2022-05-07T16:58:23Z")
When using this theme component on my phone, the width is not set to the screen width. The width extends, almost to the size of a desktop monitor.
Testing can be done here: [https://forum.tzm.community/](https://forum.tzm.community/)
Make sure to open it on a phone (or use the debug option in your browser, in Firefox you can trigger the bug by using the Galaxy Note 20 Linux profile).
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [May 11, 2022, 7:43pm UTC](https://meta.discourse.org/t/easy-responsive-footer/95818/163 "2022-05-11T19:43:05Z")
The component has been fixed. You need to update it.
[Next page](https://meta.discourse.org/t/easy-responsive-footer/95818.md?page=2)