Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Problem with social media logos sizing

Edrol97

Well-Known Coder
Hi all, I have this code I have added to my footer. Two social media icons are correct, and one is not. How do I position the Instagram logo correctly?

HTML:
<link rel="stylesheet" href="style.css">

<a href="https://www.facebook.com/house.of.lord.illustration1/" target="_blank"><img src="img/background/Facebook Logo.png" class="fa fa-facebook"></a>
<a href="https://twitter.com/eliotlord1" target="_blank"><img src="img/background/Twitter%20Logo.png" class="fa fa-twitter"></a>
<a href="https://www.instagram.com/house_of_lord_illustration/?hl=en" target="blank"><img src="img/background/Instagram logo.png" class="fa fa-instagram"></a>

CSS:
.fa {
    padding: 20px;
    font-size: 30px;
    width: 80px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    padding-bottom: 20px;
    bottom: 150px;
  }
 
  .fa:hover {
    opacity: 0.7;
  }
 
  .fa-facebook {
    background: #2e73b7;
    color: white;
  }
 
  .fa-twitter {
    background: #429bd6;
    color: white;
  }
  .fa-instagram {
    background: #ffffff;
  }
 
Without any image, I'm not sure what exactly the problem is. Is the sizing the issue or the positioning? The positioning is probably based on the height.
If you want the same size for each icon, set a max-width and max-height.
If you don't want to change the height, but still horizontally align them, then set the parent element to flex and use align-items: center;, assuming they're even contained in a parent element. If not, then do so.

I'm not sure what exactly your problem is, so I can't give a more specific answer.
 
Without any image, I'm not sure what exactly the problem is. Is the sizing the issue or the positioning? The positioning is probably based on the height.
If you want the same size for each icon, set a max-width and max-height.
If you don't want to change the height, but still horizontally align them, then set the parent element to flex and use align-items: center;, assuming they're even contained in a parent element. If not, then do so.

I'm not sure what exactly your problem is, so I can't give a more specific answer.
Think I've solved it now
 

Attachments

  • Screenshot 2024-05-11 at 19.00.29.png
    Screenshot 2024-05-11 at 19.00.29.png
    29.4 KB · Views: 9
Okay... then I'm not sure I understand what the problem was, because the icons still look misaligned and of different sizes to me? :confused:
 
Okay... then I'm not sure I understand what the problem was, because the icons still look misaligned and of different sizes to me? :confused:
The instagram logo was initially in the middle of the page. Ideally I would like each circle the same size but I'm not entirely sure how to do this. In the CSS I've set both height and width to 80px and they're still different sizes. How do I change this?
 
Have you changed the CSS code since your first post? In that CSS, you only set the width and not the height.

This could also be because of the padding. Rather than using padding, set a fixed width and height and use flexbox to centre the icon:
CSS:
.element {
  display: flex;
  justify-content: center;
  align-items: center;
}
 

Buy us a coffee!

Back
Top Bottom