Center socials

mschejbalMar 14, 2023

Hi,

I would like to center all footer content in one column but somehow I can't control social icons' position. On this page I'd like to place the Copyrights, designer and social icons in one centered column, one below the other, not in two left-right positions, that's desktop view naturally.

Thank you,
Maciek

SemiColonWebSTAFFMar 14, 2023

Hello,

You can consider using this code:

<div class="row col-mb-30 justify-content-center">
	<div class="col-12 text-center text-md-left">
		Copyrights &copy; John Patitucci 2023 &middot; All Rights Reserved<br>Webbery by <a href="https://veryniceweb.net/" target="_blank" rel="noopener">Veryniceweb</a>
	</div>

	<div class="col-12">
		<div class="d-flex justify-content-center">
			<a href="https://www.instagram.com/johnjpatitucci/" target="_blank" class="social-icon si-small si-borderless si-instagram" rel="noopener">
				<i class="icon-instagram"></i>
				<i class="icon-instagram"></i>
			</a>

			<a href="http://twitter.com/JohnJPatitucci" target="_blank" class="social-icon si-small si-borderless si-twitter" rel="noopener">
				<i class="icon-twitter"></i>
				<i class="icon-twitter"></i>
			</a>

			<a href="https://www.facebook.com/John-Patitucci-131251177024/" target="_blank" class="social-icon si-small si-borderless si-facebook" rel="noopener">
				<i class="icon-facebook"></i>
				<i class="icon-facebook"></i>
			</a>

			<a href="https://open.spotify.com/artist/4KmKbbEq6PMnW2TdkrbBIH?si=wwcgLIC0SLWmMMNHlwL9Hw" target="_blank" class="social-icon si-small si-borderless si-spotify" rel="noopener">
				<i class="icon-spotify"></i>
				<i class="icon-spotify"></i>
			</a>

			<a href="https://www.youtube.com/channel/UC8AvdNEKF3Ua5iStJeWjxuw" target="_blank" class="social-icon si-small si-borderless si-youtube" rel="noopener">
				<i class="icon-youtube"></i>
				<i class="icon-youtube"></i>
			</a>

			<a href="http://www.myspace.com/johnpatitucci" target="_blank" class="social-icon si-small si-borderless si-myspace" rel="noopener">
				<i class="icon-myspace"></i>
				<i class="icon-myspace"></i>
			</a>

			<a href="contact.html" class="social-icon si-small si-borderless si-email">
				<i class="icon-email"></i>
				<i class="icon-email"></i>
			</a>
		</div>
	</div>
</div>

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.