Não estou conseguindo fazer o flex-shrink funcionar em um grupo de divs | HTML e CSS

4
respostas

por Lucas Leal de Paula Ricardo Albuquerque

| 205.1k xp | 108 posts

Boa noite,

Estou desenvolvendo um projeto em que em uma das sections eu devo, à esquerda apresentar um slider com fotos de pessoas, e à direita colocar os links das redes sociais e os nomes das pessoas das fotos, respectivamente.

O problema é que ao encolher o navegador, as divs onde estão o link não encolhem, e para isso tentei utilizar o flex-shrink. Não está acontecendo e não estou entendendo o porquê. Segue o código dessa parte:

<div class='img__display'>
            <div class='img__display___son'>

                <div class='artist__images'>
                    <a href='#'><img src="img/kalli.jpg" alt="Foto de Kalli" class='photos'></a>
                    <a href='#'><img src="img/hb.jpg" alt="Foto de HB" class='photos'></a>
                    <a href='#'><img src="img/lc.jpg" alt="Foto de LC" class='photos'></a>
                </div>
            </div>
            <div class="artistas__socialMedia img__display___son">
                <div class='upper-frame frame'>

                </div>
                <h1>Nome do Artista</h1>
                <div class="link__media___spacing">
                    <div class='media__border' id='twttrborder'>
                        <a href='#'>
                            <div class="link__background twttr" id='twttr' onmouseover="changeColor('t', 1)"
                                onmouseout="changeColor('t', 0)">
                                <br>Twitter
                            </div>
                        </a>
                    </div>
                    <div class='media__border' id='instaborder'>
                        <a href='#'>
                            <div class="link__background insta" onmouseover="changeColor('i', 1)"
                                onmouseout="changeColor('i', 0)">
                                <br>Instagram
                            </div>
                        </a>
                    </div>
                    <div class='media__border' id='spotifyborder'>
                        <a href='#'>
                            <div class="link__background sptfy" onmouseover="changeColor('s', 1)"
                                onmouseout="changeColor('s', 0)">
                                <br>Spotify
                            </div>
                        </a>
                    </div>
                    <div class='media__border' onmouseover="changeColor('c', 1)" onmouseout="changeColor('c', 0)">
                        <a href='#'>
                            <div class="link__background sndcloud">
                                <br>SoundCloud
                            </div>
                        </a>
                    </div>
                    <div class='media__border' onmouseover="changeColor('a', 1)" onmouseout="changeColor('a', 0)">
                        <a href='#'>
                            <div class="link__background applmusic">
                                <br>Applemusic
                            </div>
                        </a>
                    </div>
                </div>
                <div class='bottom-frame frame'>

                </div>

            </div>

        </div>

4 respostas

por Lucas Leal de Paula Ricardo Albuquerque

| 205.1k xp | 108 posts

19/02/2020

CSS:

.img__display{
    width: 100%;
    height: 125vh;
    padding: .1em 3em .1em 3em;
    background-color: black;
    display: flex;
    align-items: center;
    box-shadow: 0 0 5px #0a0a0ae0;
}
.artist__images{
    flex-shrink: 3;
}
.photos{
    margin-left: 2rem;
    height: 100vh
}
.img__display___son{
    width: 50%;
}
.artistas__socialMedia{
    color: white;
    height: 120vh;
    display: flex;
    flex-direction: column;
    position: relative;
}
.link__media___spacing{
    height: 60vh;
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    position: relative;
    left: 6.5%;
    top: 2%;
}

.artistas__socialMedia h1{
    height: 15vh;
    margin-bottom: 3.5rem;
    font-size: 2.5rem;
    width: 24.6rem;
    text-align: center;
    position: relative;
    left: 6.5%;
    top:6%;
}
.frame{
    height: 10%;
    width: 70%;
}
.upper-frame{
    position: relative;
    top:2rem;
    background-image: url('../img/upper-golden-frame.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.bottom-frame{
    position: relative;
    top:4rem;
    background-image: url('../img/bottom-golden-frame.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.media__border{
    margin-top: .6rem;
    display: inline-block;
    height: 3.5rem;
    width: 25rem;
    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
    radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
}
.link__background{
    position: relative;
    top:.25rem;
    left: .2rem;
    background:rgb(15, 15, 15);
    height: 3rem;
    width: 24.6rem;
    text-align: center;
    transition:.3s;
    flex-shrink: 1;
}
.media__border a{
    justify-content: center;
    font-family: 'Cinzel';
    position: relative;
    color: white;
    text-decoration: none;
    justify-content: center;
    font-weight: bold;
    font-size: 1rem;
}
.slick-dots{
    display: flex;
    justify-content: space-between;
    width: 25%;
    position: relative;
    left: 27%;
}
ul.slick-dots li button{
background:black;
color: transparent;
border:3px solid white;
border-radius:50%;
}
ul.slick-dots li.slick-active{
    background-color: white;
    color:white;
    border-radius: 50%;
}

por Lucas Leal de Paula Ricardo Albuquerque

| 205.1k xp | 108 posts

19/02/2020

Sei que a estilização ainda está deixando a desejar, mas já estou trabalhando nisso. A dúvida é mais a respeito da responsividade desses links mesmo... Se alguém puder ajudar, agradeço muito. :)

por Lucas Leal de Paula Ricardo Albuquerque

| 205.1k xp | 108 posts

19/02/2020

Obs: O projeto utiliza o Slick Slider nessa parte das fotos. Faltou essa informação. E é um projeto de teste, nada profissional, apenas uma prática ;)

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

19/02/2020

Fala ai Lucas, tudo bem? Posso te pedir um favor? Consegue compartilhar o projeto completo? Assim fica mais fácil para eu simular o problema e consigo simular o mais próximo da realidade.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.