title: how to create a responsive footer in material?
body: <p>I am trying to develop a page footer in angular 6. I am using angular material and not using bootstrap.</p>
  
  <p>Can anyone help to change this code into the angular material syntax?</p>
  
  <p>I want to convert this footer into the full responsive Material UI design.</p>
  
  <p>If possible then can I make this footer as responsive as well?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>            .app-footer {
            margin-top: 2em;
            text-align: center;
            vertical-align:middle;
            min-height: 100%
          }
          
          .app-footer-link { 
            line-height: 1.5em;
          }
          
          .app-footer-link p {
              margin: 0;
          }
      
          .row/*:after*/ {
        display: flex;
        /*content: "";
        display: table;
        clear: both;*/
      }
      
      .firstrow/*:after*/ {
        display: flex;
        /*content: "";
        display: table;
        clear: both;*/
        padding-top: 20px;
      }
      
      .column {
        flex: 25%;
        /*width:20%;*/
        float:left;
        font-size:12px;
      }
      .headingcolumn {
        flex: 25%;
        /*width:20%;*/
        float:left;
        font-size:18px;
        /*line-height:12px;*/
      }
      .maincolumnleft {
        flex: 50%;
        /*width: 50%;*/
        float: left;
      }
      .maincolumnright {
        /*flex: 50%;*/
        width: 50%;
        float: right;
      }
      .fullcolumn {
        width: 100%;
        /*flex:100%;*/
        font-size: 12px;
        text-align: center;
        vertical-align: middle;
      }
      
      .heading{
        font-size:18px;
      }
  
          @media screen and (max-width: 600px) {
        .column {
          /*flex:100%;*/
          width: 100%;
        }
        .headingcolumn {
          /*flex: 100%;*/
          width: 100%;
        }
        .maincolumnleft {
          /*flex: 100%;*/
          width: 100%;
        }
        .maincolumnright {
          /*flex: 100%;*/
          width: 100%;
        }
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> 
  
       ------------footer.component.html---------------------------
          &lt;footer class="app-footer"&gt;
        &lt;div class="app-footer-link"&gt;
          &lt;div class="firstrow"&gt;
            &lt;div class="headingcolumn"&gt;&lt;/div&gt;
            &lt;div class="headingcolumn"&gt;B&lt;/div&gt;
            &lt;div class="headingcolumn"&gt;S&lt;/div&gt;
            &lt;div class="headingcolumn"&gt;About Us&lt;/div&gt;
            &lt;div class="headingcolumn"&gt;C Service&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
            &lt;div class="column"&gt;&lt;/div&gt;
            &lt;div class="column"&gt;New Acc&lt;/div&gt;
            &lt;div class="column"&gt;New Acc&lt;/div&gt;
            &lt;div class="column"&gt;About&lt;/div&gt;
            &lt;div class="column"&gt;Help&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
            &lt;div class="column"&gt;&lt;/div&gt;
            &lt;div class="column"&gt;Cat&lt;/div&gt;
            &lt;div class="column"&gt;St&lt;/div&gt;
            &lt;div class="column"&gt;Sit&lt;/div&gt;
            &lt;div class="column"&gt;Contact Us&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
            &lt;div class="fullcolumn"&gt;
              &lt;span class="heading"&gt;Follow:&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
            &lt;div class="fullcolumn"&gt;
              Copyright &amp;copy; {{getYear()}} 
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/8Hh55.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8Hh55.png" alt="enter image description here"></a></p>