1

estoy siguiendo un tutorial para crear mi portafolio sobre diseño web. Estoy siguiendo todo al pie de la letra pero el problema es que no sé como cambiar el tamaño de los contenedores donde va el nombre de cada tecnología

introducir la descripción de la imagen aquí

Me gustaría que el tamaño de los rectángulos fuera mas pequeño y no tan alargado hacia el lado derecho

Mi código:

<section class="skills" id = "skills">
    <h2 class="section-title">Conocimientos</h2>
      <div class="skills__container bd-grid">
        <div>
          <h2 class="skills__subtitle">PROFE</h2>
          <p class="skills__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci ipsa vitae fugiat, quos consectetur accusantium unde similique error! Porro velit quis blanditiis facere sequi commodi ad repellat eum ex? Cupiditate!</p>
        
          <div class="skills__data">
            <div class="skills__names">
              <img src="assets/img/html-5.png" class="skills__icon">
              <span class="skills__name">HTML 5</span>
            </div>
          </div>

     el resto de tecnologías - misma estructura

Este es el CSS de los divs

.skills__container{
 row-gap: 2rem;
 text-align: center;
}
.skills__subtitle{
  margin-bottom: var(--mb-2);
}
.skills__text{
  margin-bottom: var(--mb-4);
}
.skills__data{
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  font-weight: var(--font-semi);
  padding: .5rem 1rem;
  margin-bottom: var(--mb-4);
  border-radius: .5rem;
  box-shadow: 0 4px 25px rgba(14,36,49,.15);
}
.skills__icon{
  font-size: 4rem;
  margin-right: var(--mb-2);
  color: var(--first-color);
}
.skills__names{
  display: flex;
  align-items: center;
}
4
  • cambia su width
    – Christian
    el 10 ago. 2021 a las 1:45
  • ese es el tema, no vi ningún width en aquellos divs :/ el 10 ago. 2021 a las 1:47
  • pues... ponle uno
    – Christian
    el 10 ago. 2021 a las 1:50
  • Probé agregando un width: 20%; a skills container que es el padre pero me tira las tecnologías al medio mandando la imagen que las acompaña abajo de ellas. Quité el width 20% al div padre y lo probé poniendo a skills data lo cual acorta los rectangulos pero al probar el responsive termina sacando, por ejemplo, Javascript fuera del rectangulo :/ no se como calcular el % exacto sin que me arruine lo responsivo. el 10 ago. 2021 a las 2:42

1 respuesta 1

0

Cambiando el ancho en 'skills__data' con width:50%

.skills__container{
 row-gap: 2rem;
 text-align: center;
}
.skills__subtitle{
  margin-bottom: var(--mb-2);
}
.skills__text{
  margin-bottom: var(--mb-4);
}
.skills__data{
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  font-weight: var(--font-semi);
  padding: .5rem 1rem;
  margin-bottom: var(--mb-4);
  border-radius: .5rem;
  box-shadow: 0 4px 25px rgba(14,36,49,.15);
  width:50%;
}
.skills__icon{
  font-size: 4rem;
  margin-right: var(--mb-2);
  color: var(--first-color);
}
.skills__names{
  display: flex;
  align-items: center;
}
<section class="skills" id = "skills">
    <h2 class="section-title">Conocimientos</h2>
      <div class="skills__container bd-grid">
        <div>
          <h2 class="skills__subtitle">PROFE</h2>
          <p class="skills__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci ipsa vitae fugiat, quos consectetur accusantium unde similique error! Porro velit quis blanditiis facere sequi commodi ad repellat eum ex? Cupiditate!</p>
        
          <div class="skills__data">
            <div class="skills__names">
              <img src="assets/img/html-5.png" class="skills__icon">
              <span class="skills__name">HTML 5</span>
            </div>
          </div>
            <div class="skills__data">
            <div class="skills__names">
              <img src="assets/img/html-5.png" class="skills__icon">
              <span class="skills__name">Java</span>
            </div>
          </div>
        </div>
      </div>
</section>

También puedes agregar en vez de width:50% un margin-right:20%

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.