Responsive horizontal list that fits 100% width of the parent div

1

I've created a list with some social networking buttons, but the last button is from whatsapp, and I do not want it to appear in the desktop , only in mobile .

So I created this media query:

@media (max-width: 600px) {
  .socialshare-list-item .socialshare-whatsapp-button {
    display: block;
  }
}
@media (min-width: 601px) {
  .socialshare-list-item .socialshare-whatsapp-button {
    display: none;
  }
}

But when I make the whatsapp button disappear, the other <li> does not fit the width of the div pai and is fixed.

It looks like the example in this image below, and does not fit to the end line.

    
asked by anonymous 22.07.2015 / 15:50

3 answers

2

Well from what I realized from the question, what you're trying to do here is to create sharing buttons for the social networks mentioned in the question, and let them adjust to 100% of the total size of the div pai to fully occupy the same.

If so, you can do it as follows: link
(Increase or decrease the result window in jsFiddle to see the code in action)

<ul id="linksPartilha">
    <li class="redeSocial facebookShare"><a href="#">Facebook</a></li>
    <li class="redeSocial twitterShare"><a href="#">Twitter</a></li>
    <li class="redeSocial pinterestShare"><a href="#">Pinterest</a></li>
    <li class="redeSocial whatsAppShare whatsApp"><a href="#">WhatsApp</a></li>
</ul>
#linksPartilha {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: table;              /* Transforma a div numa tabela */
    table-layout: fixed;         /* Utiliza o algoritmo de uma table fixed */
    border-collapse: separate;   /* Colapsa a tabela para poder adicionar o espaçamento */
    border-spacing: 5px 0px;     /* Adiciona o espaçamento */
}

/* Cria uma lista horizontal com espaçamento */
.redeSocial {
    display: table-cell;
    background: #2f3036;
}

/* Estilo para os links dos botões */
.redeSocial a {
    display:block;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
    text-decoration: none;
}

/* Cor para cada botão */
.facebookShare {background-color:#3E5A97;}
.twitterShare {background-color:#2EA7DE;}
.pinterestShare {background-color:#C3292D;}
.whatsAppShare {background-color:#5BBE4A;}

@media (min-width: 600px) {
    .whatsApp {
        display: none;
    }
}

You can read more about table-layout: fixed; here at this link: CSS table-layout Property

p>     
22.07.2015 / 18:19
1

In this case you need to update the width of the other three buttons, because depending on the width that was set, they will not upgrade even. For example, you can leave the width: 25% in the mobile version and 33% in the desktop version.

    
22.07.2015 / 15:58
1

The other <li> do not fit because the last <li> is whatsapp is there, it is only hidden, then the others do not fit, I would need to disappear with the last <li> in the mobile version and not simply hide it.

    
13.07.2016 / 10:19