Social Links Not Showing In Mobile Footer

Mobile hiding using CSS Media Queries

Pinned Note CSS Media Queries
In some responsive templates that include the pro footer when the footer hides on mobile the social links will not display. The following solves this issue. This is for responsive templates that include a file "footer.htm".

See Also…

Adding social icons in mobile view
If your footer social icons are not displaying on mobile devices, follow these steps in templates with a pro footer to display the social media links on mobile devices. Your template must include the file social-links.js
  1. In the "style.css" in the "/* SOCIAL ICONS" section copy and paste this line of code. Exact placement in the "style.css" is not important:

    .mobile-social { display: none; }


  2. In the "media-queries.css" in the "Media Queries 740" section copy and paste these 2 lines of code. You can add it right after the ".footerhide" class.

    .mobile-social { display: block; padding: 10px 0px 10px 0px; }
    .mobile-social table { margin: 0 auto; }


  3. In each html page find the "START FOOTER" note near the bottom. Just above that line add these 4 lines of code.

    <!-- SOCIAL LINKS ON MOBILE -->
    <div class="mobile-social">
    <script type="text/javascript" src="social-links.js"></script>
    </div>


  4. If you do not see the icons: You may need to color the social icons. Find the class ".socialicon" in the "style.css". Here is example code that colors the icons.

    .socialicon { border: #004C76 1px solid; display: block; background-color: #004C76; }





Responsive Minisites