-2
Good morning gentlemen, I ask for help to some God of Css, I need to do in pure css, put these captions aligned the balls of social icons, they are already aligned and already appear, but I can’t get them to 'drop' down below the balls... in the image shows how it should look, HELP
HOW IT SHOULD LOOK:
Is online at: 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/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&start&end&wmode=opaque&loop=0&controls=1&mute=0&rel=0&modestbranding=0"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br></section>
</div>
</body>
</html>
The mistake would be on that line:
<b class="text1" style="color: #F7C53F; margin-left: -75px;">Celular</b>
Are you using some UI framework like Bootstrap? It seems to me that the code is a little out of the standard to get into responsiveness. Using bootstrap can gain functions to align everything in cols.
– Guillerbr
Good afternoon, sorry it takes the return I am beginner in CSS and here too. I’m still with the problem, but I had a breakthrough, I just need to figure out how to lower the subtitles below the icons, the project used Boostrap for what I was given, but I’m in a challenge and I got everything, but these captions are breaking me... I can’t get them any lower than the icones with pure css...
– weise