Menu icon Foundation
Help with footer images

We are creating a footer and would like three social icons to be close and centered under the contact information. Currently we have the contact information in columns, but they also are a little too spaced out. The social icons were also in columns, but I have since removed them. I have tried removing the space in the gutter, but either was doing it incorrectly or couldn't get it to work.

Here is the Inky code so far (we have the footer in a partial):

 

<row>

  <columns class="padding">

  </columns>

</row>

<row>

  <columns class="footerbar" small="12" large="12">

  </columns>

</row>

<row>

  <columns class="padding">

  </columns>

</row>

<row>

    <center>

        <columns small="12" large="5">

    <p style="font-size:12px;"><strong>Contact Us:</strong> Online Admissions</p>

    </columns>

    <center>

      <columns small="12" large="3">

      <img src="http://pages.universityadmissions.info/rs/731-FJI-115/images/ContactIcons-03.png" alt="Phone" style="float:left; height:20px;">

    <p style="font-size:12px; align:left;">(330) 474-3285</p>

    </columns>

      </center>

      <columns small="12" large="4">

      <img src="http://pages.universityadmissions.info/rs/731-FJI-115/images/ContactIcons-02.png" alt="E-mail" style="float:left; height:20px">

    <p style="font-size:12px;">onlinedegrees@kent.edu</p>

    </columns>

  </center>

</row>

<row>

  <columns small="12" large="12">

<img src="http://pages.universityadmissions.info/rs/731-FJI-115/images/facebook-128.png" href="google.com" alt="Facebook" style="height:30px;">

<img src="http://pages.universityadmissions.info/rs/731-FJI-115/images/twitter-128.png" href="google.com" alt="Twitter" style="height:30px;">

<img src="http://pages.universityadmissions.info/rs/731-FJI-115/images/youtube-128.png" href="google.com" alt="YouTube" style="height:30px;">

</columns>

</row>

<br/>

<br/>

<row>

  <columns small="12" large="12">

    <p style="text-align:center; font-size:10px;">Kent State University | 800 E. Summit St. Kent, Ohio 44240

  <br/><u><a style="color:#00b3ef" href="mailto:onlinedegrees@kent.edu">onlinedegrees@kent.edu</a></u> | <u><a style="color:#00b3ef" href="#">Privacy</a></u> | <u><a style="color:#00b3ef" href="#">Unsubscribe</a></u></p>

  </columns>

</row>

 

 

 

question

We are creating a footer and would like three social icons to be close and centered under the contact information. Currently we have the contact information in columns, but they also are a little too spaced out. The social icons were also in columns, but I have since removed them. I have tried removing the space in the gutter, but either was doing it incorrectly or couldn't get it to work.

Here is the Inky code so far (we have the footer in a partial):

 

<row>

  <columns class="padding">

  </columns>

</row>

<row>

  <columns class="footerbar" small="12" large="12">

  </columns>

</row>

<row>

  <columns class="padding">

  </columns>

</row>

<row>

    <center>

        <columns small="12" large="5">

    <p style="font-size:12px;"><strong>Contact Us:</strong> Online Admissions</p>

    </columns>

    <center>

      <columns small="12" large="3">

      <img src="http://pages.universityadmissions.info/rs/731-FJI-115/images/ContactIcons-03.png" alt="Phone" style="float:left; height:20px;">

    <p style="font-size:12px; align:left;">(330) 474-3285</p>

    </columns>

      </center>

      <columns small="12" large="4">

      <img src="http://pages.universityadmissions.info/rs/731-FJI-115/images/ContactIcons-02.png" alt="E-mail" style="float:left; height:20px">

    <p style="font-size:12px;">onlinedegrees@kent.edu</p>

    </columns>

  </center>

</row>

<row>

  <columns small="12" large="12">

<img src="http://pages.universityadmissions.info/rs/731-FJI-115/images/facebook-128.png" href="google.com" alt="Facebook" style="height:30px;">

<img src="http://pages.universityadmissions.info/rs/731-FJI-115/images/twitter-128.png" href="google.com" alt="Twitter" style="height:30px;">

<img src="http://pages.universityadmissions.info/rs/731-FJI-115/images/youtube-128.png" href="google.com" alt="YouTube" style="height:30px;">

</columns>

</row>

<br/>

<br/>

<row>

  <columns small="12" large="12">

    <p style="text-align:center; font-size:10px;">Kent State University | 800 E. Summit St. Kent, Ohio 44240

  <br/><u><a style="color:#00b3ef" href="mailto:onlinedegrees@kent.edu">onlinedegrees@kent.edu</a></u> | <u><a style="color:#00b3ef" href="#">Privacy</a></u> | <u><a style="color:#00b3ef" href="#">Unsubscribe</a></u></p>

  </columns>

</row>

 

 

 

Stephen Rust over 3 years ago

If I understand correctly, images are treated as block level elements, so they'll take up 100% of the width of their parent container. That's why they appear on separate lines on your example. 

I would suggest putting each image in it's own column so they're displayed horizontally inline instead of vertically.

Your Inky code would look something like this. 

<container>
  <row>
    <columns small="12" large="12">
      <h1 class="text-center">Social Icons Test</h1>
    </columns>
  </row>
  <row class="collapse">
    <columns small="3" large="3">
      <!-- Empty Column -->
    </columns>
    <columns small="2" large="2">
      <center>
        <img src="http://lorempixel.com/25/25" alt="">
      </center>
    </columns> 
    <columns small="2" large="2">
        <center>
        <img src="http://lorempixel.com/25/25" alt="">
      </center>
    </columns> 
    <columns small="2" large="2">
        <center>
        <img src="http://lorempixel.com/25/25" alt="">
      </center>
    </columns> 
    
    <columns small="3" large="3">
      <!-- Empty Column -->
    </columns>  
  </row>
  
</container>

Emily Mentzer over 3 years ago

Thanks! That's kind of where we were at, but now i'm wanting to eliminate the large space between each image. Do you know how I would do that?

Stephen Rust over 3 years ago

Hmm, without modifying the number of columns in the _settings.scss file, you won't be able to fill out the row with the required 12 columns. 

 

However, if you can left or right justify the social links, you can reduce the spacing with some floats.

 

Ex:

<container>
  <row>
    <columns small="12" large="12">
      <h1 class="text-center">Social Icons Test</h1>
    </columns>
  </row>
  <row>
    <columns small="1" large="1">
          <img class="float-left" src="http://lorempixel.com/25/25" alt="">
    </columns>
    <columns small="1" large="1">
          <img class="float-left" src="http://lorempixel.com/25/25" alt="">
    </columns> 
    <columns small="1" large="1">
          <img class="float-left" src="http://lorempixel.com/25/25" alt="">
    </columns>  
    <columns small="9" large="9">
      <!-- 9 empty columns for other content-->
    </columns>  
  </row>
</container>

Result: