AndrewAlva
commented
5 years ago Este ya está corregido, solamente falta ajustar el orden en el eje z para que en pantallas más chicas cuando se encime la metabola y el texto, la metabola esté abajo del texto y el texto siempre se vea.
Esto se logra de 2 maneras, agregando el atributo "position: relative" al contenedor del texto para que ocupe un lugar en el eje z; esto funciona por estar escrito en el HTML después de la metabola, recuerda que en HTML el primer elemento creado está atrás, y el último al frente. Quedaría así:
La opción 2 es agregar el atributo "z-index: -1" a la metabola para que esté detrás de todos los elementos en el eje z; "z-index" maneja valores positivos y negativos, entre menor sea el número, el elemento queda más atrás; y viceversa, todos los elementos en HTML por default están en "z-index: 1" y la jerarquía de quién está encima y quién atrás viene desde el orden en HTML, cuando escribes directamente z-index: __ lo que haces es forzar la posición del elemento. Si haces esto quedaría así:
Aquí estás posicionando de forma incorrecta la metabola de la derecha; piensa en que los objetos se alinean relativamente a su contenedor, en el caso de la metabola de la derecha, nos interesa que se mantenga siempre a la derecha, sin importar que la ventana cambie de tamaño.
Actualmente lo que estás haciendo es empujar desde la izquierda a la metabola; entonces cuando la pantalla es más pequeña que la distancia que le diste, la metabola sale de la ventana y ya no se ve.
Esto se resuelve muy fácil, en lugar de utilizar translateX; utilizas "position: absolute", y "right: ?px" para que css calcule la posición desde el lado derecho de la pantalla, que es donde lo queremos. En este caso necesitamos que el valor de right sea negativo (-10px por ejemplo) para que se oculte una parte de la metabola; y para prevenir que se cree un scroll horizontal utilizaremos "overflow hidden" en el contenedor de la sección, que es 'icons-section'.
Te adjunto una imagen de cómo se ve actualmente en mi pantalla: