• GoDaddy Community
  • GoDaddy Website Builders
  • GoDaddy Website Builders

    cancel
    Showing results for 
    Show  only  | Search instead for 
    Did you mean: 
    Go to solution
    PlanetB
    Getting Started

    Custom HTML social buttons

    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

    1 ACCEPTED SOLUTION
    ablake
    Community Manager

    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. 🙂


     

    Angela B - GoDaddy | Community Manager | 24/7 support available at x.co/247support | Remember to choose a solution and give kudos.

    View solution in original post

    8 REPLIES 8
    ablake
    Community Manager

    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.



     

    Angela B - GoDaddy | Community Manager | 24/7 support available at x.co/247support | Remember to choose a solution and give kudos.
    PlanetB
    Getting Started

    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
    Community Manager

    @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.

    Angela B - GoDaddy | Community Manager | 24/7 support available at x.co/247support | Remember to choose a solution and give kudos.
    PlanetB
    Getting Started

    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
    Community Manager

    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/

     

     

     

    Angela B - GoDaddy | Community Manager | 24/7 support available at x.co/247support | Remember to choose a solution and give kudos.
    PlanetB
    Getting Started

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

    ablake
    Community Manager

    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. 🙂


     

    Angela B - GoDaddy | Community Manager | 24/7 support available at x.co/247support | Remember to choose a solution and give kudos.

    View solution in original post

    PlanetB
    Getting Started

    It works now, thanks.