-2

Bom dia senhores, peço ajuda a algum Deus do Css, preciso fazer em css puro, colocar estas legendas alinhadas as bolinhas dos icones sociais, elas ja estao alinhadas e já aparecem, porém não consigo fazer com que elas 'desçam' mais a baixo das bolinhas... na imagem mostra como deveria ficar, HELP

COMO DEVERIA FICAR: inserir a descrição da imagem aqui

Está online em: https://diretivagestao.com/cv/index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <link href="img/favicon.ico" rel="icon"> <!-- Favicons -->
    <link href="img/favicon.ico" rel="apple-touch-icon"> <!-- Favicons pra Apple -->
    <title>Cartão de Visita Digital | Líder Tratores - Cachoeira do Sul</title>
    <!-- CSS que renderiza o fundo -->
    <link rel='stylesheet' href='css/style.css' media='all' />
    <!-- CSS que renderiza o zoom da página -->
    <link rel='stylesheet' href='css/frontend.css' media='all' />
    <!-- CSS main -->
    <link rel='stylesheet' href='css/main.css' media='all' />
    <!-- CSS das fonte dos icones -->
    <link rel='stylesheet' href='css/fontawesome/css/all.css' media='all' />
    <!-- JS pra forçar carregamento total -->
    <script src='js/frontend.min4315.js'></script>
</head>
<body>
    <div class="elementor elementor-123">
        <!-- Seção 1 - Cabeçalho com logo -->
        <section class="elementor-element elementor-element-79a917d elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-section elementor-top-section">
            <div class="elementor-background-overlay"></div> <!-- Cor Laranja sobre o background do cabeçalho -->
            <div class="elementor-element elementor-element-6bc23d30 elementor-widget elementor-widget-image"> <!-- Centralizar Logo Branco e demais-->
                <div class="elementor-image">
                    <img width="300" height="56" style="margin-left: 10px;" src="img/Lider-logo1.png" class="" alt="" />
                </div>
            </div>
        </section>
        <!-- Seção 2 - Primeira Coluna contendo imagem de perfil, nome sobrenome, função/cargo e botões redes sociais -->
        <section class="elementor-element elementor-element-5345a4b9 elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-section elementor-top-section">
            <div class="elementor-container elementor-column-gap-default"> <!-- Centraliza os conteúdos do bloco -->
                <div class="elementor-row" style="margin-left: 155px;"> <!-- Posição do logo do rosto -->
                    <div class="elementor-element elementor-element-712345a6 elementor-column elementor-col-100 elementor-top-column">
                        <div class="elementor-column-wrap  elementor-element-populated">
                            <div class="elementor-widget-wrap">
                                <div class="elementor-element elementor-element-136b839a elementor-widget elementor-widget-image">
                                    <div class="elementor-widget-container" style="position: relative; top: -40px;margin-left: -75%;"> <!-- Posição conteúdo da 1 coluna -->
                                        <div class="elementor-image">
                                            <div class="elementor-element elementor-element-925e5a8 elementor-position-top elementor-vertical-align-top elementor-widget elementor-widget-image-box"> <!-- Cor letras -->
                                                <img src="img/usuario1.png" class="" style="" alt="" /> <!-- Logo do rosto -->
                                                <div class="elementor-image-box-content"> <!-- style das letras do bloco -->
                                                    <h4 class="elementor-image-box-title"><b>JULIANA JAEGER BECKEL</b></h4><p class="elementor-image-box-description">Diretora Administrativa</p>
                                                </div>
                                            </div>
                                            <div class="elementor-element elementor-element-57c03b6f elementor-shape-circle elementor-widget elementor-widget-social-icons"> <!-- style dos botões/cor -->
                                                <div class="" style="margin-left: 30px;"> <!-- Botões redes sociais -->
                                                    <a class="elementor-icon elementor-social-icon" href="tel:+555199996-1470" title="Celular" target="_blank">
                                                    <i class="fas fa-mobile-alt"></i></a>
                                                    
                                                    <b class="text1" style="color: #F7C53F; margin-left: -75px;">Celular</b>
                                                    
                                                    <a class="elementor-icon elementor-social-icon" href="https://api.whatsapp.com/send?phone=555199996-1470" title="WhatsApp" target="_blank">
                                                    <i class="fab fa-whatsapp"></i></a>

                                                    <b style="margin-left: -75px;">Celular</b>

                                                    <a class="elementor-icon elementor-social-icon" href="tel:+55513722-9900" title="Telefone" target="_blank">
                                                    <i class="fas fa-phone"></i></a>

                                                    <b style="margin-left: -75px;">Celular</b>

                                                    <a class="elementor-icon elementor-social-icon" href="https://www.google.com.br/maps/place/L%C3%ADder+Tratores/@-30.0387469,-52.9153089,17z/data=!3m1!4b1!4m5!3m4!1s0x9504a7a41e7a2c45:0xcf2b4c73f6c7aca2!8m2!3d-30.0387516!4d-52.9131202" title="Endereço" target="_blank">
                                                    <i class="fas fa-map-marker-alt"></i></a>

                                                    <b style="margin-left: -75px;">Celular</b>

                                                    <br>
                                                    <a class="elementor-icon elementor-social-icon" style="margin-left: -15px; margin-top: 15px;" href="mailto:[email protected]" title="E-mail" target="_blank">
                                                    <i class="far fa-envelope"></i></a>

                                                    <b style="margin-left: -75px;">Celular</b>

                                                    <a class="elementor-icon elementor-social-icon" href="http://www.lidertratores.com.br/" title="Site" target="_blank">
                                                    <i class="fas fa-globe"></i></a>

                                                    <b style="margin-left: -75px;">Celular</b>

                                                    <a class="elementor-icon elementor-social-icon" href="https://pt-br.facebook.com/lider.tratores/" title="Facebook" target="_blank">
                                                    <i class="fab fa-facebook"></i></a>

                                                    <b style="margin-left: -75px;">Celular</b>

                                                    <a class="elementor-icon elementor-social-icon" href="https://www.instagram.com/lidertratores/?hl=pt-br" title="Instagram" target="_blank">
                                                    <i class="fab fa-instagram"></i></a>

                                                    <b style="margin-left: -75px;">Celular</b>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row" style="height: 1px;margin-top: -450px;"> <!-- Conteúdo da coluna 2 -->
                    <div class="elementor-element elementor-element-1b0dc154 elementor-column elementor-col-50 elementor-top-column">
                        <!-- <div style="position: relative; top: -90%;" class="elementor-column-wrap elementor-element-populated"></div> Linha do meio -->
                    </div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                    <div class="elementor-element elementor-element-77dfd583 elementor-column elementor-col-50 elementor-top-column">
                        <div style="" class="elementor-column-wrap elementor-element-populated">
                            <div class="elementor-widget-wrap">
                                <div class="elementor-element elementor-element-40b481a3 elementor-aspect-ratio-169 elementor-widget elementor-widget-video">
                                    <div class="elementor-widget-container">
                                        <div class="elementor-wrapper elementor-fit-aspect-ratio elementor-open-inline">
                                            <iframe class="elementor-video-iframe" allowfullscreen title="YouTube Video" src="https://www.youtube.com/embed/shWSKJAcNj8?feature=oembed&amp;start&amp;end&amp;wmode=opaque&amp;loop=0&amp;controls=1&amp;mute=0&amp;rel=0&amp;modestbranding=0"></iframe>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <br></section>
    </div>
</body>
</html>

O erro seria nessa linha:

<b class="text1" style="color: #F7C53F; margin-left: -75px;">Celular</b>
2
  • 1
    Você esta usando algum framework para UI como o Bootstrap? Me parece que o código está um pouco fora do padrão para se aportar na responsividade. Se usar o bootstrap pode ganhar funções para alinhar tudo em cols.
    – Guillerbr
    Commented 3/09/2020 às 15:41
  • Boa tarde, desculpa demora pelo retorno sou iniciante em CSS e por aqui também. Ainda estou com o problema, mas tive grande avanço, só falta agora eu descobrir como deixar as legendas mais a baixo dos ícones, o projeto utilizava Boostrap pelo o que me foi passado, porém estou em um desafio e consegui tudo, mas estas legendas estão me quebrando... não consigo deixar elas mais a baixo dos icones com css puro...
    – weise
    Commented 8/09/2020 às 18:40

1 Resposta 1

-2

CONSEGUI!!!

RESOLVIDO COM 3 ATRIBUTOS, 1 LINHA:

margin-left: -75px;
position: absolute;
margin-top: 54px !important;

Muito obrigado a todos que tentaram me ajudar de qualquer maneira, que tenham uma ótima semana.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .