Quantcast
Channel: Active questions tagged flexbox - Stack Overflow
Viewing all articles
Browse latest Browse all 1675

How to make these cards sit side by side in flexbox CSS

$
0
0

I have been trying so many configurations to get these 3 cards to show side by side while using flexbox. I've adjusted the width and column / row. Where am I going wrong?

Is flexbox the best way to do this? I thought that this would be easier than using a grid but it's giving me issues and i just need this one part to go through. other flexbox elements have worked fine. not sure why this is giving me so many issues.

.servicios {  text-align: center;  color: #C7567C;  font-family: "Josefin Sans", sans-serif;  background-color: #FFF1F4;}.servicescontainter {  display: flex;  flex-wrap: wrap;}.card {  background-color: #E1E1E6;  font-family: "Josefin Sans", sans-serif;  color: #C7567C;  justify-content: center;  flex-direction: column}
<div class="servicios"><h2>Servicios para:</h2><div class=servicescontainer><div class="card"><div><img src="../7898491_company_business_finance_office_marketing_icon.png" alt="Negocios"></div><h3>Negocios</h3><p>Ofrecemos una<br> variedad de<br> servicios para<br> statisfacer las<br> necesidades de su<br> negocio.</p></div><div class="card"><div><img src="../9204022_family_mother_child_father_soldier_icon.png" alt="Individuos y Familias"></div><h3>Individuos y<br> Familias</h3><p>Podemos ayudarle<br> con muchos de sus<br> documentos y<br> formularios<br> individuales o<br> familiares.</p></div><div class="card"><div><img src="../115766_bubble_comment_speech_chat_talk_icon.png" alt="Otra"></div><h3>Otra</h3><p>¿No ves algo en la<br> lista? ponte en<br> contacto con<br> nosotros para ver<br> cómo podemos<br> ayudarte<br></p></div></div></div>

Viewing all articles
Browse latest Browse all 1675

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>