How to make single row footer responsive

Question

I have very few contents in footer and it is in single line. There are one thing I am trying to achieve

When I go for the mobile view say range from 320px to 480px, social media icons and text gets overlapped i want them in two lines when there is no place to fit in single line. The same happens for tablet screen.

here is my example code

.footer-section {
  background: #e5e5e5;
}

p.text-muted {
  margin-bottom: 0;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}

.social-media-icons {
  position: absolute;
  right: 0;
  top: 15px;
}

.fc-today-button {
  display: none;
}

.copyright-footer-text {
  font-family: 'ralewaymedium';
  font-size: 12px;
  color: #333333;
}

.social-media-section>a {
  margin-right: 20px;
  color: #465e8d;
}

.social-media-section>a:hover {
  color: #e36a5c;
}

.footer-section {
  position: relative;
}

.social-media-section {
  position: absolute;
  top: 0;
  right: 0;
  padding-top: 15px;
  padding-bottom: 15px;
}

select.ui-datepicker-month>option.customOption:hover {
  color: red;
}

.myClass {
  color: #fff;
}

.tab-content {
  min-height: 600px;
}

.no-del-msg {
  font-family: 'ralewaymedium';
  font-size: 14px;
  font-style: italic;
}

.icon-desciption {
  padding-right: 0;
  padding-left: 0;
}

<div class='container'>
  <h1>hi this is heading</h1>
</div>
<div class="container-fluid footer-section">
  <footer class="footer">
    <div class="footer-section col-xs-12">
      <p class="text-muted copyright-footer-text">Copyright 2016 © PurpleChilli. All rights reserved.</p>

    </div>
    <div class="pull-right social-media-section">
      <a href=""><i class="fa fa-2x fa-google"></i></a>
      <a href=""><i class="fa fa-2x fa-twitter"></i></a>
      <a href=""><i class="fa fa-2x fa-instagram"></i></a>
      <a href=""><i class="fa fa-2x fa-linkedin"></i></a>
      <a href=""><i class="fa fa-2x fa-pinterest"></i></a>
      <a href=""><i class="fa fa-2x fa-youtube"></i></a>
      <a href=""><i class="fa fa-2x fa-facebook"></i></a>
    </div>
  </footer>
</div>

Please don't state more than 1 problems in a question. Ask seperate questions. The technique used to solve your first issue is called *sticky footer* there are many implementations on the internet. — T J, May 30 '16 at 10:07
@TJ sticky footer works on position:absolute;bottom:0, for which the parent element must have position:relative and in my case there is some content in between which has position relative already. Also sticky footer always sticks at bottom when there is content it should not stick. So I have tried that its not working in my case — Sudarshan Kalebere, May 30 '16 at 10:20
*"Also sticky footer always sticks at bottom when there is content "* - No, that's not what is called sticky footer. *"sticky footer works on position:absolute;bottom:0,"* - again no, like I said there are many implementations and many ways to achieve it. — T J, May 30 '16 at 10:22
https://css-tricks.com/snippets/css/sticky-footer/ this for example? If you search you'll find many ways to do it. BTW you should really split your question into two questions, one for sticky footer (which is likely to be a duplicate http://stackoverflow.com/q/29069498/2333214 http://stackoverflow.com/q/21805590/2333214 if those solutions don't work you need to explain why in your question) and another question for icons alignment — T J, May 30 '16 at 10:27
oh man @TJ by looking at your reputation points of stackoverflow I thought you are genius, but I was wrong. Please check the css he has written in your link he has given height for footer thats totally bu**s*** I am sorry but thats not the best way to achieve. and I know there are ways as per my search there are following ways 1: giving postion abosolate, fixed worsk 2: giving min-height to body works but not for all I am sorry but I was looking for the best practise example, you dont want this question then fine I will delete this. Thank you. — Sudarshan Kalebere, May 30 '16 at 10:35
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/113311/discussion-between-sudarshan-kalebere-and-t-j). — Sudarshan Kalebere, May 30 '16 at 10:36
You are free to think what you want. I'm just not interested in questions that asks for solutions to many localized problems which isn't useful for future readers. Your question doesn't follow the sites rules. There are other ways using table layout, flex etc depending on the requirement, like browser support, static/vs dynamic height etc. By the way you don't have to delete the question, you can edit it and make it such a way that it asks for the solution for solid problem. And if it's about sticky footer, you need to explain why the already existing solutions doesn't solve your issue. — T J, May 30 '16 at 10:52
and you took a look at one link I gave as an example without even going throught the other links or other resourse in the internet, comes back here and rant about my reputation and how you think I'm a moron. lol nice attitude. There is a reason why you're the one asking a low quality question which I wasn't even botehred to answer and I was the one trying to guide you into at least making it a quality question.. Have a nice day. — T J, May 30 '16 at 10:59
@TJ If applying sticky footer works then why dont you try on my given fiddle? I think you are thinking this is usual question and has many solutions why dont you try one? what do you mean by quality question? all people here are not intelligent as you so some questions will come like this. I dont believe such a heavy and lengthy comments you have written my friend just to guide me, I think you would have solved this in only few lines of magical css. thanks for guiding.. — Sudarshan Kalebere, May 30 '16 at 11:19
*" why dont you try one?"* - Your question (*too localized, asking for many things in one question*) and your attitude(*You still didn't try to improve your question*) doesn't make me think it's like worth spenting my time. Please don't waste my time commenting. Thanks — T J, May 30 '16 at 11:26
Since you edited the question here's something to start with https://jsfiddle.net/agykLj9n/1/. You might want to use media queries and reduce the margin padding etc between icons if you want them in single row for devices as small as 320px wide — T J, May 30 '16 at 11:38

score 0 · Answer 1 · answered May 30 '16 at 11:58

Just updated some part of your CSS as below.

.social-media-section{
    position: absolute;
    top: 0;
    right: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: right;
}

@media (max-width:967px) {
  .social-media-section {
    float: left !important;
    right: auto;
    text-align: center;
    position: relative;
    padding: 0;
  }
}

And HTML part as below

<div class="pull-right social-media-section col-xs-12">
 .....
</div>

score 0 · Answer 2 · answered May 30 '16 at 12:29

You are using bootstrap which makes this very easily solved. You do not need any extra positional css on the footer elements, just structure the HTML correctly according to bootstrap.

<div class="row">
  <div class="col-md-6">
    < Put left side content here >
  </div>
  <div class="col-md-6">
    < Put left side content here >
  </div>
</div>

Place this inside your footer container div and bootstrap takes care of the rest.

How to make single row footer responsive

2 Answers2