Three social media buttons

Home › Forums › Timessquare Site Template › Three social media buttons

This topic contains 5 replies, has 2 voices, and was last updated by  ab-themes 9 years ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 3, 2015 at 8:20 am #7072

    berend
    Participant

    I added a third social media button (youtube) to the template. How can I align them on the same row?

    I already changed the width of .social-buttons a to 33% but the white space between the buttons is not the same.

    April 7, 2015 at 5:44 am #7114

    ab-themes
    Keymaster

    Hi!

    Where did you add the social media buttons? Can you provide a link to the page so that we may inspect the issue?

    When you want to align the elements in the same div, the container div needs to have text-align:center; style and it has to be display:inline-block.

    April 12, 2015 at 2:09 pm #7255

    berend
    Participant

    See example link in hidden content (I moved the social media buttons to the section above the map).

    April 13, 2015 at 6:14 am #7266

    ab-themes
    Keymaster

    Hi!

    Your HTML must look like this

    <div class="social-buttons clearfix">
	<a class="button facebook " href="https://www.facebook.com/......" target="_blank">Facebook</a>
	<a class="button twitter " href="https://twitter.com/......" target="_blank">Twitter</a>
        <a class="button youtube " href="https://www.youtube.com/c/......" target="_blank">YouTube</a>     
</div>

    In your style.css add

    .social-buttons {
  text-align: center;
}

.social-buttons a {
  width: 31%;
  text-align: center;
  margin-bottom: 20px;
  height: 55px;
  display: inline-block;
  padding-top: 15px;
  margin-right: 2%;
}

.social-buttons a:last-of-type {
  margin-right: 0;
}

    This should do it :)

    April 15, 2015 at 5:27 am #7337

    berend
    Participant

    Thank you very much!

    April 15, 2015 at 6:05 am #7341

    ab-themes
    Keymaster

    No problem, happy to help :)

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Three social media buttons’ is closed to new replies.