Can someone help me with organizing my social icons on my website? I want them to be centered when viewing the site on mobile and aligned to the right on desktop.
The Issue: Currently, the icons are aligning to the left and then centering on mobile. I can't seem to make them align to the right instead of the left.
Here is the HTML code:
<div class="soimg">
<div class="images">
<img src="social/facebook.png"/>
<img src="social/insta.png"/>
<img src="social/twitter.png"/>
<img src="social/youtube.png"/>
</div>
</div>
CSS:
.soimg img {
height:30px;
width: auto;
margin-right: 5px;
display: inline-block;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%);
opacity: 0.4;
text-align: right;
}
.soimg img:hover {
filter: none;
-webkit-filter: grayscale(0%);
opacity: 1;
}
.images {
height:50px;
background-color:#1c1c1c;
margin-top: -20px;
margin-bottom: -20px;
}
@media screen and (max-width:700px) {
.soimg {
margin-left: auto;
margin-right: auto;
text-align: center;
}
}