title: Building responsive footer in ReactJS
body: <p>I have some issues to figure out how to manage to build a responsive footer. Until now I got this . On normal screen is looking nice but when you switch to the 'device-toolbar' (mobile version) of the aplication it's getting messed up . (paragraphs and icons come under each other) I'll be glad if I can recieve some help here. Thank you.</p>
  <p>[<strong>Normal Screen</strong>][1]
  [1]: https://i.stack.imgur.com/HiZNV.jpg
  [<strong>Mobile Screen</strong>][2]
  [2]: https://i.stack.imgur.com/6LKMA.jpg</p>
  <p>P.S.
  I am building my aplication on ReactJS and here is part of my code:</p>
  <p><strong>Footer.js</strong></p>
   
  <pre><code>&lt;div id='social'&gt;
  
    &lt;a className='fa fa-linked-in' target='_blank' rel='noopener noreferrer' href='https://linkedin.com/in/sample-7842b814a'&gt;&lt;/a&gt;
    &lt;a className='fa fa-github' target='_blank' rel='noopener noreferrer' href='https://github.com/sample'&gt;&lt;/a&gt;
    &lt;a className='fa fa-google' rel='noopener noreferrer' href=&quot;mailto:sample@gmail.com&quot;&gt;&lt;/a&gt;
    &lt;a className='fa fa-instagram' target='_blank' rel='noopener noreferrer' href='https://www.instagram.com/sample/?hl=undefined'&gt;&lt;/a&gt;
  
  &lt;/div&gt;
  
  &lt;div id='elements'&gt;
  
    &lt;img id='phone' src={phone} /&gt;
    &lt;p&gt;+32 696 69 69 69&lt;/p&gt;
  
    &lt;img id='email' src={email} /&gt; &lt;p&gt;sample@gmail.com&lt;/p&gt;
    &lt;img id='pin' src={pin} /&gt; &lt;p&gt;Antwerp , Belgium&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
    
     
  **App.cs**
  <pre><code>    #footer{
        background-color:#051222;
        width: 100%;
        height: 100px;
        position: absolute;
        overflow: hidden;
        bottom: 0;
        }
      
        @media only screen and (max-width: 480px) {
          #footer ul li a img {
            max-width: 100%;
            display: block;
            /* height: auto; */ 
           }
          }
     p {
    color: #d35360;
    display:inline-block;
    margin: 50px 40px 0 10px;  
    overflow: none;
    font-family: 'Lato', sans-serif;
  }
  
  img {
    height: 100%;
    vertical-align: middle;
  }
  </code></pre>