1
respuesta

Las imágenes se ven raras

Hola! Sucede que mis imágenes, en la vista de dispositivos, se ven así: Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad e ven así: Creo que hay un problema y que se deberían ver distintas, al menos, a la altura de los títulos que representan. Aquí dejo mi CSS y mi HTML

<section class="diferenciales container">
                    <ul class="diferenciales__lista">
                        <li class="diferenciales__item diferenciales__item-reloj">
                            <h2 class="item__titulo">Tiempo</h2>
                            <p class="item__texto">¡El tiempo es importante! Trabajamos en ritmo acelerado, para atender los plazos rigurosamente.</p>
                        </li>
                        <li class="diferenciales__item diferenciales__item-dinero">
                            <h2 class="item__titulo">Enfoque</h2>
                            <p class="item__texto">Nos enfocamos en el pequeño y mediano emprendedor, ofrecemos servicios de calidad con precios accesibles.</p>
                        </li>
                        <li class="diferenciales__item diferenciales__item-quimica">
                            <h2 class="item__titulo">Especialistas</h2>
                            <p class="item__texto">Equipo especializada, con experiencia de mercado. Testamos todos los productos antes del lanzamiento.</p>
                        </li>
                    </ul>
                </section>

Y el CSS:

.diferenciales {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
}

.diferenciales__lista {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.diferenciales__item {
    max-width: 350px;
    box-sizing: border-box;
    padding: 2rem 0 2rem 5rem;
    background-repeat: no-repeat;
    background-position: top 1.25rem left 1.25 rem;
}

.item__titulo {
    color: var(--fuente-ceniza-oscuro);
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.item__texto {
    line-height: normal;
}

.diferenciales__item-reloj{
    background-image: url(../img/icono-reloj.png);
}

.diferenciales__item-dinero{
    background-image: url(../img/icono-dinero.png);
}

.diferenciales__item-quimica{
    background-image: url(../img/icono-quimica.png);
}
1 respuesta

Hola, Silvia! Cómo estás?

Creo que el error sucede porque hay un error en la propriedad background-position de diferenciales__item.

Donde ves 1.25 rem deberia ser 1.25rem todo junto.

.diferenciales__item {
    max-width: 350px;
    box-sizing: border-box;
    padding: 2rem 0 2rem 5rem;
    background-repeat: no-repeat;
    background-position: top 1.25rem left 1.25rem;
}

Espero haber ayudado!

Continúa con tus estudios y hasta la proxima.

¡Vamos juntos!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios!