Skip to main content

Forums

This topic contains 7 replies, has 4 voices, and was last updated by  JoTidman 5 months, 1 week ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #279954

    JoTidman
    Participant

    Hi all,
    I’m new to bootstrap and I stumbled across social media buttons so thought I’d like to use it too. I’m re-writing my website to get away from iframes! I got the coding from here: https://www.w3schools.com/howto/howto_css_social_media_buttons.asp
    My trouble is that the icon displays as an oval not a circle and the facebook symbol F is half out of the oval to the right hand side. I don’t know whether it’s something wrong with my code for the fonts in the code pen clip I’ve included or if it’s something else in my whole page interfering with it. I’ve spent two days tweaking things and tried different versions but nothing seems to be working. Can anyone help please?

    #279955

    JoTidman
    Participant

    the code pen doesn’t seem to work, I’m not sure why. I’m new to all this!

    #279979

    Paulie_D
    Moderator

    If something is displaying as an oval and not a circle then either its not initially a square or your border radius is wrong.

    Start there.

    #279997

    JoTidman
    Participant

    Hi Thanks for the reply. I can’t see what other code might be affecting it. Here’s the link to my temporary site. The problem is in the footer. http://www.rockclick.co.uk/index1.htm

    #279999

    JoTidman
    Participant

    Is anyone able to have a look at the code on my index page to see what might be causing the problem? Thank you.

    #280000

    Beverleyh
    Participant

    Troubleshooting a whole website’s codebase via the developer console isn’t a very appealing prospect to potential helpers; All the extra code and distractions takes time to filter out and work around, and many of us will be limited by the device we’re browsing on at the time, so these types of requests are less likely to be answered. Have you used the developer console to search for the problem yourself though? Hit F12 in your browser and start inspecting the problematic elements to see all the CSS that’s applied. You’ll be able to see the immediate icon CSS, but also any other styles from higher up the cascade that might be affecting things. You’ll also be able to use the developer console to write new CSS to fix the problem live in the browser. In addition to what Paulie_D already suggested, line-heights and paddings are likely to be contenders for causing the issue too.

    #280003

    wolfcry911
    Participant

    in the .fa class change the width to 70px

    #280007

    JoTidman
    Participant

    Thank you wolfcry911. That’s done the trick.
    I was really hoping it would be something simple that someone would just be able to pick out!
    Thank you very much. :-)

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star