Footer on Mobile versions

Hi, how are you?
I am having issues on the credits of the footer on my website. (www.marinaficcio.com)
As seen on the attached images, on the desktop is perfect fine, but on the mobile version for tablet and phone is not working, it cuts off and the instagram and facebook icon stays under the bottom to the top.
How can I fixed it?And is there a way to center the copyright?
The codes that I am using is,

footer#colophon {
    padding: 0px 0;
}

a.btn.back-to-top.inner-link{
	position: absolute center;
	right:-3px;
	bottom: -20px;
	transform: translateX(-10%);
	-webkit-transform: translateX(-50%);
	height: 1px;
	width: 18px;
	padding: 1px 1px;
}

.footer-credits {
    display: none;
}

#menu-social-items{
	-webkit-transform:scale(1)     translatex(0px) translatey(5px) skewx(0deg);
	transform:scale(1)     translatex(0px) translatey(5px) skewx(0deg);
}

I tried the following codes, but didn’t work at all.

@media (max-width:768px){

	.site-info .copyright-text{
		left:-7px;
		position:relative;
	}
	
	#menu-social-items a i{
		position:relative;
		left:-20px;
		
	}
	
}

@media (max-width:320px){

	#colophon .row{
		width:320px;
	}
	
	.site-info .copyright-text{
		
		left:-4px;
		position:relative;
	}
	
	#menu-social-items a i{
		left:-138px;
		top:-11px;
		position:relative;
	}
	
}

Kind Regards,
Marina.