Custom HTML social buttons

[PlanetB]

So I found these buttons online. And they work fine for pc view but when on mobile its not so good.

This is how it looks on mobile now : https://prnt.sc/wng7fl

Is it possible to remove this slider under it and to make it 2 under 2. Like

instagram youtube (and under them)

facebook twitter

Here is the source code : https://codepen.io/Stockin/pen/bzdNOq

[ablake]

Hey @PlanetB,

Try adding this to the bottom of the CSS:

@media screen and (max-width: 480px) {
    ul {
        display: grid;
        grid-template-columns: 50% 1fr;
        row-gap: 30px;
    }
}

The max-width value doesn't have to be 480px, you can increase that to whatever width the scroll bar starts showing up.

That will get you the 2 rows of icons and solve your scroll bar problem. It won't rearrange them so that Facebook & Twitter are underneath Instagram & YouTube. I'm sure that's possible, but it would take a lot more code, or you'd need to arrange them so that Facebook & Twitter come after Instagram & YouTube in the HTML.

[PlanetB]

But now its even worse. The first row is cut in half and for some reason they are connected. Played a little bit with width and still couldnt get the slider off, even the up-down slider somehow created itself : https://prnt.sc/wnsvvq

As for rearranging I could do it in html code with wrapper.

[ablake]

@PlanetB which GoDaddy website builder are you using? Is it the newest version? I'd like to test in the same environment where you're implementing the code.

[PlanetB]

Well I dont really know since its my first time using it. I bought it few days ago so I guess its the latest version. Is there a way to check it ?

Also what is with forum. It takes me like 1-2mins to load the page. And there are often errors when I try to reply like "Sorry, unable to complete the action you requested." or when I click the reply it sometimes it doesnt do anything etc...

[ablake]

Yeah, we were noticing some latency earlier today & have a ticket open with our platform provider. Sorry about that. 😞

If you just bought it a few days ago, it's got to be our latest one. I think you'd need to set a min height in the media query to resolve the vertical scroll ... not sure why it's still giving you a horizontal scroll, though.

This isn't perfect, but I dropped it into a website builder and tinkered a little here: https://airshipadventures.godaddysites.com/

[PlanetB]

Its good at your site, can you send me the final code ?

[ablake · Accepted solution]

Here's what I did:

<script src="https://kit.fontawesome.com/d08af34a25.js" crossorigin="anonymous"></script>
<style>
body {
margin:0;
padding:0;
background: #fff;
}
ul {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
margin:0;
padding:0;
display:flex;
}
ul li {
list-style:none;
}
ul li a {
display:block;
position:relative;
width:100px;
height:100px;
line-height:100px;
font-size:40px;
text-align:center;
text-decoration:none;
color:#404040;
margin: 0 30px;
transition:.5s;
}
ul li a span {
position:absolute;
transition: transform .5s;
}
ul li a span:nth-child(1),
ul li a span:nth-child(3){
width:100%;
height:3px;
background:#404040;
}
ul li a span:nth-child(1) {
top:0;
left:0;
transform-origin: right;
}
ul li a:hover span:nth-child(1) {
transform: scaleX(0);
transform-origin: left;
transition:transform .5s;
}

ul li a span:nth-child(3) {
bottom:0;
left:0;
transform-origin: left;
}
ul li a:hover span:nth-child(3) {
transform: scaleX(0);
transform-origin: right;
transition:transform .5s;
}

ul li a span:nth-child(2),
ul li a span:nth-child(4){
width:3px;
height:100%;
background:#404040;
}
ul li a span:nth-child(2) {
top:0;
left:0;
transform:scale(0);
transform-origin: bottom;
}
ul li a:hover span:nth-child(2) {
transform: scale(1);
transform-origin: top;
transition:transform .5s;
}
ul li a span:nth-child(4) {
top:0;
right:0;
transform:scale(0);
transform-origin: top;
}
ul li a:hover span:nth-child(4) {
transform: scale(1);
transform-origin: bottom;
transition:transform .5s;
}

.facebook:hover {
color: #3b5998;
}
.facebook:hover span { 
background: #3b5998;
}
.twitter:hover {
color: #1da1f2;
}
.twitter:hover span { 
background: #1da1f2;
}
.instagram:hover {
color: #c32aa3;
}
.instagram:hover span { 
background: #c32aa3;
}
.google:hover {
color: #dd4b39;
}
.google:hover span { 
background: #dd4b39;
}
ul li a .twitter {
color: #1da1f2;
}
ul li a:hover:nth-child(3) {
color: #c32aa3;
}
ul li a:hover:nth-child(4) {
color: #dd4b39;
}


@media screen and (max-width: 650px) {
ul li a {
margin: 0 10px;
}
}

@media screen and (max-width: 480px) {
body {
min-height: 260px;
}
ul {
display: grid;
grid-template-columns: 50% 1fr;
row-gap: 30px;
}
ul li a {
margin: 0 30px;
}
}

</style>

<ul>
<li>
<a class="facebook" href="#">
<span></span>
<span></span>
<span></span>
<span></span>
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li>
<a class="twitter" href="#">
<span></span>
<span></span>
<span></span>
<span></span>
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
</li>
<li>
<a class="instagram" href="#">
<span></span>
<span></span>
<span></span>
<span></span>
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
</li>
<li>
<a class="google" href="#">
<span></span>
<span></span>
<span></span>
<span></span>
<i class="fa fa-google-plus" aria-hidden="true"></i>
</a>
</li>
</ul>

Don't forget to replace my FontAwesome kit link with yours. Otherwise, it should be good. 🙂

[PlanetB]

It works now, thanks.