Social media icons alignment on page issues

HTML & CSS
1

I modified a template which I have uploaded at (https://www.mind-waves.stevenredhead.com/Template-index.html) the social media icons at the bottom of the page are oriented horizontally.
After modifying the page the social media icons at the bottom of the page are oriented vertically (https://www.mind-waves.stevenredhead.com/).
The alignment of the social media icons are fine in Safari, but have the mentioned issue in Chrome and Firefox.
I have tried to resolve this without success.
Q: Is there any errors in the html that stand out to cause this to happen?
Any ideas would be most welcome. Thank you.

2

Try removing all the “br elements” from here…

              <ul class="social-network social-circle">
                <li><a href="https://www.youtube.com/channel/UCxrj8X9BqxgCB_mTB4qPufQ"
                    target="_blank"
                    class="icoYoutube"
                    title="Youtube"><i
                      class="fa fa-youtube-square"></i></a><br>
                </li>
                <li><a href="https://www.amazon.com/s/ref=nb_sb_noss_2?url=search-alias%3Daps&amp;field-keywords=steven+redhead"
                    target="_blank"
                    class="icoBook"
                    title="Amazon"><i
                      class="fa fa-book"></i></a><br>
                </li>
                <li><a href="https://www.facebook.com/LawsOfCreation/" target="_blank"
                    class="icoFacebook"
                    title="Facebook"><i
                      class="fa fa-facebook"></i></a><br>
                </li>
                <li><a href="https://twitter.com/PhiloMind" target="_blank" class="icoTwitter"
                    title="Twitter"><i
                      class="fa fa-twitter"></i></a><br>
                </li>
                <li><a href="https://plus.google.com/u/0/+StevenRedheadPhilomind"
                    target="_blank"
                    class="icoGoogle"
                    title="Google +"><i
                      class="fa fa-google-plus"></i></a><br>
                </li>
                <li><a href="https://www.linkedin.com/in/stevenredhead" target="_blank"
                    class="icoLinkedin"
                    title="Linkedin"><i
                      class="fa fa-linkedin"></i></a><br>
                </li>
              </ul>

coothead

3 Likes
3

Thank you very much for your reply coothead, what you recommended worked perfectly.

Because the <br> were in the template and that worked all right I would never have thought of these <br> being the issue.

4

 
 
             No problem, you’re very welcome. :winky:
 
 
            coothead

1 Like
5

Sorry to trouble you coothead. I found that the top image of the website you helped me with the icon buttons (https://www.mind-waves.stevenredhead.com/2) isn’t showing the top image on my Android LG mobile; I don’t know anyone with an iPhone so I had no information on how the site shows on those. I tried the original template (https://www.mind-waves.stevenredhead.com/Template-index.html1) on my mobile and that has the same issue of no top image. The top right menu also when activated blocks the section it goes to.
If you have any quick fix it would be great to have your advice.
Thank you.

6

Hi there sredhead,

your two links show me this information…

THE PAGE CAN NOT BE FOUND: 404 ERROR :wonky:

coothead

2 Likes
7

Hi coothead,
Thank you for your reply. I’m not sure what happened the two links added some numbers for some reason, another mystery.
The link of the modified page is (https://www.mind-waves.stevenredhead.com/) and the original template is (https://www.mind-waves.stevenredhead.com/Template-index.html).
Any ideas why both these pages are not showing the top image on mobiles would be most welcome.
It seems the original template must have add issues, both with the social media icons and the top image on mobiles.
Thank you.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.