wonky footer

[Pavel]

Hello,

ok, interesting

site

www.forallthetime.com/project1/index.html

see footer

i have succesfuly FTP the footer, more clearly the social media icons

on my desktop google there are no issues with the icons, in dev tools too.. they are all there 🙂

desktop firefox is fine too

desktop edge is fine


on my iphone:

on chrome , the icons are missing!

on google, the icons are there!

firefox, no icons!

edge, no icons

what is going on?

PLEASE HELP 🙂

maybe dumb it down a little

please provide the proper code so i can add it to my code


thanks!

 

[Chaos]

Hello,

ok, interesting

site

www.forallthetime.com/project1/index.html

see footer

i have succesfuly FTP the footer, more clearly the social media icons

on my desktop google there are no issues with the icons, in dev tools too.. they are all there 🙂

desktop firefox is fine too

desktop edge is fine


on my iphone:

on chrome , the icons are missing!

on google, the icons are there!

firefox, no icons!

edge, no icons

what is going on?

PLEASE HELP 🙂

maybe dumb it down a little

please provide the proper code so i can add it to my code


thanks!

Without seeing your code, it's a bit challenging to pinpoint the exact issue, but I can provide you with a general troubleshooting approach and some potential solutions.

1. Check Font Awesome or Icon Library: If you're using an icon library like Font Awesome, make sure that the library is properly linked in your HTML file. It's possible that the library is not being loaded correctly on certain browsers or devices.
   
   

   <!-- Add this link in the head of your HTML file -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha384-xrR9LlR4nT4ZLl6vzOAenNJtMOa0mLy4lZAi+VRVo6ZLigv/ZF5VjrGCExlCPBIa" crossorigin="anonymous">

   
   
2. Browser Cache: Clear the cache on the browsers where the icons are not displaying properly. Sometimes, cached versions of the page may cause issues.
3. Responsive Design: Ensure that your website has a responsive design. Check if you are using media queries in your CSS to handle different screen sizes.
4. Cross-Browser Compatibility: Test your website on multiple browsers to ensure cross-browser compatibility. Sometimes, different browsers interpret code differently.
5. Fallback Icons: Provide a fallback option for the icons. This can be a default icon or a simple text representation of the social media platform. This ensures that users will see something even if the icons don't load.
   
   

   <!-- Example using Font Awesome with fallback text -->
   <i class="fab fa-facebook" aria-hidden="true"></i>
   <span class="sr-only">Facebook</span>

   
   
   
6. Update Browser: Ensure that the browsers on your iPhone are up-to-date. Sometimes, older browser versions may have issues with rendering certain elements.

If the issue persists, please provide the relevant part of your HTML and CSS code related to the social media icons so that I can give more specific assistance.