/** * ============================================================================ * SISTEMA DE CONTROL GRANULAR DE POSICIÓN DE BLOQUES DE TEXTO - SERVICIOS * ============================================================================ * * PROPÓSITO: * Este archivo permite controlar la posición (eje X e Y) de los BLOQUES DE TEXTO * de cada uno de los 9 servicios de forma independiente en todos los breakpoints * responsivos (19 en total). * * IMPORTANTE - DIFERENCIA CON gep-carousel-position.css: * - gep-carousel-position.css: Controla las imágenes/carruseles * - gep-text-position.css (ESTE ARCHIVO): Controla los bloques de texto * * ============================================================================ * CÓMO USAR ESTE SISTEMA - PASO A PASO * ============================================================================ * * PASO 1: INCLUIR ESTE CSS EN EL HTML * ------------------------------------ * Agrega esta línea en el de index.html (después de gep-carousel-position.css): * * * * * PASO 2: AGREGAR CLASE AL BLOQUE DE TEXTO EN HTML * -------------------------------------------------- * Cada servicio tiene un bloque de texto que contiene el contenido (título, descripción, etc.) * Debes agregar la clase "text-servicio-X" al div que contiene el texto. * * EJEMPLO PARA SERVICIO 1 (Servicios Integrados): * * ANTES (sin clase): *
*
*

Servicios Integrados

*

Contenido del servicio...

*
*
* * DESPUÉS (con clase text-servicio-1): *
*
*

Servicios Integrados

*

Contenido del servicio...

*
*
* * CLASES A AGREGAR: * - Servicio 1 (Servicios Integrados): text-servicio-1 * - Servicio 2 (Generación Eléctrica): text-servicio-2 * - Servicio 3 (Bombeo Mecánico): text-servicio-3 * - Servicio 4 (Plantas de Tratamiento): text-servicio-4 * - Servicio 5 (Well Testing): text-servicio-5 * - Servicio 6 (Mantenimiento): text-servicio-6 * - Servicio 7 (Fluidos): text-servicio-7 * - Servicio 8 (Metrología): text-servicio-8 * - Servicio 9 (Construcción): text-servicio-9 * * * PASO 3: AJUSTAR POSICIÓN EN ESTE CSS * ------------------------------------- * Una vez agregada la clase en HTML, puedes controlar la posición del texto * modificando los valores de left, top y transform en cada breakpoint. * * VALORES DE POSICIÓN: * - left: Mueve el texto horizontalmente (eje X) * - Valores negativos: mueve a la IZQUIERDA * - Valores positivos: mueve a la DERECHA * - Ejemplo: left: -50px (50px a la izquierda), left: 100px (100px a la derecha) * * - top: Mueve el texto verticalmente (eje Y) * - Valores negativos: mueve ARRIBA * - Valores positivos: mueve ABAJO * - Ejemplo: top: -30px (30px arriba), top: 80px (80px abajo) * * - transform: Movimiento adicional con porcentajes o píxeles * - translateX(): Movimiento horizontal adicional * - translateY(): Movimiento vertical adicional * - Ejemplo: transform: translateX(10%) translateY(-5%) * * * VERIFICACIÓN - CHECKLIST DE 3 PASOS: * ✓ 1. CSS incluido en de index.html * ✓ 2. Clase text-servicio-X agregada al div del texto en HTML * ✓ 3. position: relative configurado en este CSS (ya viene por defecto) * * Si los cambios NO surten efecto, verifica estos 3 puntos. * * ============================================================================ */ /* ════════════════════════════════════════════════════════════════════════════ 🎯 SERVICIO 0: TÍTULO PRINCIPAL DE LA SECCIÓN ════════════════════════════════════════════════════════════════════════════ PROPÓSITO: Controla la posición del texto principal "Servicios Integrales para la Industria del Petróleo y Gas" y su párrafo descriptivo. UBICACIÓN EN HTML (línea ~934):

Servicios Integrales para la Industria del Petróleo y Gas

CÓMO APLICAR EN HTML: --------------------- Agrega la clase "text-servicio-0" al contenedor que envuelve el título: ANTES:

...

Descripción...

DESPUÉS:

...

Descripción...

NOTA IMPORTANTE: ---------------- Este control afecta TODO el bloque (título + párrafo descriptivo). Si solo quieres mover el título, aplica la clase directamente al

. Si solo quieres mover el párrafo, aplica la clase directamente al

. DISPOSITIVO DEL USUARIO: 468x858 → Breakpoint 451-480px (marcado con ★) ════════════════════════════════════════════════════════════════════════════ */ /* Configuración base - NECESARIA para que funcione el posicionamiento */ .text-servicio-0 { position: relative !important; } /* Breakpoint 1: ≤320px (Dispositivos muy pequeños) */ @media (max-width: 320px) { .text-servicio-0 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 2: 321px - 340px */ @media (min-width: 321px) and (max-width: 340px) { .text-servicio-0 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 3: 341px - 360px */ @media (min-width: 341px) and (max-width: 360px) { .text-servicio-0 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 4: 361px - 390px */ @media (min-width: 361px) and (max-width: 390px) { .text-servicio-0 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 5: 391px - 420px */ @media (min-width: 391px) and (max-width: 420px) { .text-servicio-0 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 6: 421px - 450px */ @media (min-width: 421px) and (max-width: 450px) { .text-servicio-0 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* ★ Breakpoint 7: 451px - 480px → TU DISPOSITIVO (468x858) ★ */ @media (min-width: 451px) and (max-width: 480px) { .text-servicio-0 { left: 0px !important; /* Ajusta para mover horizontalmente */ top: -190px !important; /* Ajusta para mover verticalmente */ transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 8: 481px - 520px */ @media (min-width: 481px) and (max-width: 520px) { .text-servicio-0 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 9: 521px - 550px */ @media (min-width: 521px) and (max-width: 550px) { .text-servicio-0 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 10: 551px - 600px */ @media (min-width: 551px) and (max-width: 600px) { .text-servicio-0 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 11: 601px - 650px */ @media (min-width: 601px) and (max-width: 650px) { .text-servicio-0 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 12: 651px - 700px */ @media (min-width: 651px) and (max-width: 700px) { .text-servicio-0 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 13: 701px - 800px */ @media (min-width: 701px) and (max-width: 800px) { .text-servicio-0 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 14: 801px - 900px */ @media (min-width: 801px) and (max-width: 900px) { .text-servicio-0 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 15: 901px - 992px */ @media (min-width: 901px) and (max-width: 992px) { .text-servicio-0 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 16: 993px - 1100px */ @media (min-width: 993px) and (max-width: 1100px) { .text-servicio-0 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 17: 1101px - 1200px */ @media (min-width: 1101px) and (max-width: 1200px) { .text-servicio-0 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 18: 1201px - 1400px */ @media (min-width: 1201px) and (max-width: 1400px) { .text-servicio-0 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 19: >1400px (Pantallas grandes) */ @media (min-width: 1401px) { .text-servicio-0 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* ════════════════════════════════════════════════════════════════════════════ 📝 GUÍA DE USO - SERVICIO 0 (TÍTULO PRINCIPAL) ════════════════════════════════════════════════════════════════════════════ EJEMPLO 1: Mover el título completo 20px hacia abajo ------------------------------------------------------ Busca el breakpoint 451-480px (marcado con ★) y cambia: top: 0px !important; → top: 20px !important; EJEMPLO 2: Centrar más el texto (mover a la izquierda) -------------------------------------------------------- Busca el breakpoint 451-480px y cambia: left: 0px !important; → left: -30px !important; EJEMPLO 3: Mover solo el párrafo descriptivo --------------------------------------------- En lugar de agregar "text-servicio-0" al

, agrégalo directamente al párrafo:

En GLOBAL ENERGY & PRODUCTION COMPANY...

OPCIONES DE APLICACIÓN: ----------------------- 1. TODO EL BLOQUE (título + párrafo):
2. SOLO EL TÍTULO:

3. SOLO EL PÁRRAFO:

════════════════════════════════════════════════════════════════════════════ */ /* ============================================================================ SERVICIO 1: SERVICIOS INTEGRADOS - BLOQUE DE TEXTO ============================================================================ CONFIGURACIÓN BASE: position: relative - Permite usar left/top para mover el bloque de texto DISPOSITIVO DEL USUARIO: 468x858 → Breakpoint 451-480px (marcado con ★) CÓMO ENCONTRAR TU BLOQUE DE TEXTO EN HTML: Busca en index.html la sección del servicio 1, encontrarás algo como:

Servicios Integrados

GEP S.A.S. brinda soluciones integrales...

Agrega la clase "text-servicio-1" al div col-lg-6:
============================================================================ */ /* Configuración base - NECESARIA para que funcione el posicionamiento */ .text-servicio-1 { position: relative !important; } /* Breakpoint 1: ≤320px (Dispositivos muy pequeños) */ @media (max-width: 320px) { .text-servicio-1 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 2: 321px - 340px */ @media (min-width: 321px) and (max-width: 340px) { .text-servicio-1 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 3: 341px - 360px */ @media (min-width: 341px) and (max-width: 360px) { .text-servicio-1 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 4: 361px - 390px */ @media (min-width: 361px) and (max-width: 390px) { .text-servicio-1 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 5: 391px - 420px */ @media (min-width: 391px) and (max-width: 420px) { .text-servicio-1 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 6: 421px - 450px */ @media (min-width: 421px) and (max-width: 450px) { .text-servicio-1 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* ★ Breakpoint 7: 451px - 480px → TU DISPOSITIVO (468x858) ★ */ @media (min-width: 451px) and (max-width: 480px) { .text-servicio-1 { left: 0px !important; /* Ajusta este valor para mover horizontalmente */ top: -330px !important; /* Ajusta este valor para mover verticalmente */ transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 8: 481px - 520px */ @media (min-width: 481px) and (max-width: 520px) { .text-servicio-1 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 9: 521px - 550px */ @media (min-width: 521px) and (max-width: 550px) { .text-servicio-1 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 10: 551px - 600px */ @media (min-width: 551px) and (max-width: 600px) { .text-servicio-1 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 11: 601px - 650px */ @media (min-width: 601px) and (max-width: 650px) { .text-servicio-1 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 12: 651px - 700px */ @media (min-width: 651px) and (max-width: 700px) { .text-servicio-1 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 13: 701px - 800px */ @media (min-width: 701px) and (max-width: 800px) { .text-servicio-1 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 14: 801px - 900px */ @media (min-width: 801px) and (max-width: 900px) { .text-servicio-1 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 15: 901px - 992px */ @media (min-width: 901px) and (max-width: 992px) { .text-servicio-1 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 16: 993px - 1100px */ @media (min-width: 993px) and (max-width: 1100px) { .text-servicio-1 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 17: 1101px - 1200px */ @media (min-width: 1101px) and (max-width: 1200px) { .text-servicio-1 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 18: 1201px - 1400px */ @media (min-width: 1201px) and (max-width: 1400px) { .text-servicio-1 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 19: >1400px (Pantallas grandes) */ @media (min-width: 1401px) { .text-servicio-1 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* ============================================================================ SERVICIO 2: SERVICIOS INTEGRADOS - BLOQUE DE TEXTO ============================================================================ CONFIGURACIÓN BASE: position: relative - Permite usar left/top para mover el bloque de texto DISPOSITIVO DEL USUARIO: 468x858 → Breakpoint 451-480px (marcado con ★) CÓMO ENCONTRAR TU BLOQUE DE TEXTO EN HTML: Busca en index.html la sección del servicio 2, encontrarás algo como:

Servicios Integrados

GEP S.A.S. brinda soluciones integrales...

Agrega la clase "text-servicio-2" al div col-lg-6:
============================================================================ */ /* Configuración base - NECESARIA para que funcione el posicionamiento */ .text-servicio-2 { position: relative !important; } /* Breakpoint 1: ≤320px (Dispositivos muy pequeños) */ @media (max-width: 320px) { .text-servicio-2 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 2: 321px - 340px */ @media (min-width: 321px) and (max-width: 340px) { .text-servicio-2 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 3: 341px - 360px */ @media (min-width: 341px) and (max-width: 360px) { .text-servicio-2 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 4: 361px - 390px */ @media (min-width: 361px) and (max-width: 390px) { .text-servicio-2 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 5: 391px - 420px */ @media (min-width: 391px) and (max-width: 420px) { .text-servicio-2 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 6: 421px - 450px */ @media (min-width: 421px) and (max-width: 450px) { .text-servicio-2 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* ★ Breakpoint 7: 451px - 480px → TU DISPOSITIVO (468x858) ★ */ @media (min-width: 451px) and (max-width: 480px) { .text-servicio-2 { left: 0px !important; /* Ajusta este valor para mover horizontalmente */ top: -310px !important; /* Ajusta este valor para mover verticalmente */ transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 8: 481px - 520px */ @media (min-width: 481px) and (max-width: 520px) { .text-servicio-2 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 9: 521px - 550px */ @media (min-width: 521px) and (max-width: 550px) { .text-servicio-2 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 10: 551px - 600px */ @media (min-width: 551px) and (max-width: 600px) { .text-servicio-2 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 11: 601px - 650px */ @media (min-width: 601px) and (max-width: 650px) { .text-servicio-2 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 12: 651px - 700px */ @media (min-width: 651px) and (max-width: 700px) { .text-servicio-2 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 13: 701px - 800px */ @media (min-width: 701px) and (max-width: 800px) { .text-servicio-2 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 14: 801px - 900px */ @media (min-width: 801px) and (max-width: 900px) { .text-servicio-2 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 15: 901px - 992px */ @media (min-width: 901px) and (max-width: 992px) { .text-servicio-2 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 16: 993px - 1100px */ @media (min-width: 993px) and (max-width: 1100px) { .text-servicio-2 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 17: 1101px - 1200px */ @media (min-width: 1101px) and (max-width: 1200px) { .text-servicio-2 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 18: 1201px - 1400px */ @media (min-width: 1201px) and (max-width: 1400px) { .text-servicio-2 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 19: >1400px (Pantallas grandes) */ @media (min-width: 1401px) { .text-servicio-2 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* ============================================================================ SERVICIO 3: SUMINISTRO DE UNIDADES DE BOMBEO - BLOQUE DE TEXTO ============================================================================ CONFIGURACIÓN BASE: position: relative - Permite usar left/top para mover el bloque de texto DISPOSITIVO DEL USUARIO: 468x858 → Breakpoint 451-480px (marcado con ★) CÓMO ENCONTRAR TU BLOQUE DE TEXTO EN HTML: Busca en index.html la sección del servicio 3, encontrarás algo como:

Servicios Integrados

GEP S.A.S. brinda soluciones integrales...

Agrega la clase "text-servicio-3" al div col-lg-6:
============================================================================ */ /* Configuración base - NECESARIA para que funcione el posicionamiento */ .text-servicio-3 { position: relative !important; } /* Breakpoint 1: ≤320px (Dispositivos muy pequeños) */ @media (max-width: 320px) { .text-servicio-3 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 2: 321px - 340px */ @media (min-width: 321px) and (max-width: 340px) { .text-servicio-3 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 3: 341px - 360px */ @media (min-width: 341px) and (max-width: 360px) { .text-servicio-3 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 4: 361px - 390px */ @media (min-width: 361px) and (max-width: 390px) { .text-servicio-3 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 5: 391px - 420px */ @media (min-width: 391px) and (max-width: 420px) { .text-servicio-3 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 6: 421px - 450px */ @media (min-width: 421px) and (max-width: 450px) { .text-servicio-3 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* ★ Breakpoint 7: 451px - 480px → TU DISPOSITIVO (468x858) ★ */ @media (min-width: 451px) and (max-width: 480px) { .text-servicio-3 { left: 0px !important; /* Ajusta este valor para mover horizontalmente */ top: -280px !important; /* Ajusta este valor para mover verticalmente */ transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 8: 481px - 520px */ @media (min-width: 481px) and (max-width: 520px) { .text-servicio-3 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 9: 521px - 550px */ @media (min-width: 521px) and (max-width: 550px) { .text-servicio-3 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 10: 551px - 600px */ @media (min-width: 551px) and (max-width: 600px) { .text-servicio-3 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 11: 601px - 650px */ @media (min-width: 601px) and (max-width: 650px) { .text-servicio-3 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 12: 651px - 700px */ @media (min-width: 651px) and (max-width: 700px) { .text-servicio-3 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 13: 701px - 800px */ @media (min-width: 701px) and (max-width: 800px) { .text-servicio-3 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 14: 801px - 900px */ @media (min-width: 801px) and (max-width: 900px) { .text-servicio-3 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 15: 901px - 992px */ @media (min-width: 901px) and (max-width: 992px) { .text-servicio-3 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 16: 993px - 1100px */ @media (min-width: 993px) and (max-width: 1100px) { .text-servicio-3 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 17: 1101px - 1200px */ @media (min-width: 1101px) and (max-width: 1200px) { .text-servicio-3 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 18: 1201px - 1400px */ @media (min-width: 1201px) and (max-width: 1400px) { .text-servicio-3 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 19: >1400px (Pantallas grandes) */ @media (min-width: 1401px) { .text-servicio-3 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* ============================================================================ SERVICIO 4: PLANTAS DE TRATAMIENTO DE AGUAS - BLOQUE DE TEXTO ============================================================================ CONFIGURACIÓN BASE: position: relative - Permite usar left/top para mover el bloque de texto DISPOSITIVO DEL USUARIO: 468x858 → Breakpoint 451-480px (marcado con ★) CÓMO ENCONTRAR TU BLOQUE DE TEXTO EN HTML: Busca en index.html la sección del servicio 4, encontrarás algo como:

Servicios Integrados

GEP S.A.S. brinda soluciones integrales...

Agrega la clase "text-servicio-4" al div col-lg-6:
============================================================================ */ /* Configuración base - NECESARIA para que funcione el posicionamiento */ .text-servicio-4 { position: relative !important; } /* Breakpoint 1: ≤320px (Dispositivos muy pequeños) */ @media (max-width: 320px) { .text-servicio-4 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 2: 321px - 340px */ @media (min-width: 321px) and (max-width: 340px) { .text-servicio-4 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 3: 341px - 360px */ @media (min-width: 341px) and (max-width: 360px) { .text-servicio-4 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 4: 361px - 390px */ @media (min-width: 361px) and (max-width: 390px) { .text-servicio-4 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 5: 391px - 420px */ @media (min-width: 391px) and (max-width: 420px) { .text-servicio-4 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 6: 421px - 450px */ @media (min-width: 421px) and (max-width: 450px) { .text-servicio-4 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* ★ Breakpoint 7: 451px - 480px → TU DISPOSITIVO (468x858) ★ */ @media (min-width: 451px) and (max-width: 480px) { .text-servicio-4 { left: 0px !important; /* Ajusta este valor para mover horizontalmente */ top: -250px !important; /* Ajusta este valor para mover verticalmente */ transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 8: 481px - 520px */ @media (min-width: 481px) and (max-width: 520px) { .text-servicio-4 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 9: 521px - 550px */ @media (min-width: 521px) and (max-width: 550px) { .text-servicio-4 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 10: 551px - 600px */ @media (min-width: 551px) and (max-width: 600px) { .text-servicio-4 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 11: 601px - 650px */ @media (min-width: 601px) and (max-width: 650px) { .text-servicio-4 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 12: 651px - 700px */ @media (min-width: 651px) and (max-width: 700px) { .text-servicio-4 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 13: 701px - 800px */ @media (min-width: 701px) and (max-width: 800px) { .text-servicio-4 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 14: 801px - 900px */ @media (min-width: 801px) and (max-width: 900px) { .text-servicio-4 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 15: 901px - 992px */ @media (min-width: 901px) and (max-width: 992px) { .text-servicio-4 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 16: 993px - 1100px */ @media (min-width: 993px) and (max-width: 1100px) { .text-servicio-4 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 17: 1101px - 1200px */ @media (min-width: 1101px) and (max-width: 1200px) { .text-servicio-4 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 18: 1201px - 1400px */ @media (min-width: 1201px) and (max-width: 1400px) { .text-servicio-4 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 19: >1400px (Pantallas grandes) */ @media (min-width: 1401px) { .text-servicio-4 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* ============================================================================ SERVICIO 5: WELL TESTING PRUEBAS INICIALES Y EXTENSAS. ============================================================================ CONFIGURACIÓN BASE: position: relative - Permite usar left/top para mover el bloque de texto DISPOSITIVO DEL USUARIO: 468x858 → Breakpoint 451-480px (marcado con ★) CÓMO ENCONTRAR TU BLOQUE DE TEXTO EN HTML: Busca en index.html la sección del servicio 5, encontrarás algo como:

Servicios Integrados

GEP S.A.S. brinda soluciones integrales...

Agrega la clase "text-servicio-5" al div col-lg-6:
============================================================================ */ /* Configuración base - NECESARIA para que funcione el posicionamiento */ .text-servicio-5 { position: relative !important; } /* Breakpoint 1: ≤320px (Dispositivos muy pequeños) */ @media (max-width: 320px) { .text-servicio-5 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 2: 321px - 340px */ @media (min-width: 321px) and (max-width: 340px) { .text-servicio-5 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 3: 341px - 360px */ @media (min-width: 341px) and (max-width: 360px) { .text-servicio-5 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 4: 361px - 390px */ @media (min-width: 361px) and (max-width: 390px) { .text-servicio-5 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 5: 391px - 420px */ @media (min-width: 391px) and (max-width: 420px) { .text-servicio-5 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 6: 421px - 450px */ @media (min-width: 421px) and (max-width: 450px) { .text-servicio-5 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* ★ Breakpoint 7: 451px - 480px → TU DISPOSITIVO (468x858) ★ */ @media (min-width: 451px) and (max-width: 480px) { .text-servicio-5 { left: 0px !important; /* Ajusta este valor para mover horizontalmente */ top: -340px !important; /* Ajusta este valor para mover verticalmente */ transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 8: 481px - 520px */ @media (min-width: 481px) and (max-width: 520px) { .text-servicio-5 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 9: 521px - 550px */ @media (min-width: 521px) and (max-width: 550px) { .text-servicio-5 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 10: 551px - 600px */ @media (min-width: 551px) and (max-width: 600px) { .text-servicio-5 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 11: 601px - 650px */ @media (min-width: 601px) and (max-width: 650px) { .text-servicio-5 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 12: 651px - 700px */ @media (min-width: 651px) and (max-width: 700px) { .text-servicio-5 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 13: 701px - 800px */ @media (min-width: 701px) and (max-width: 800px) { .text-servicio-5 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 14: 801px - 900px */ @media (min-width: 801px) and (max-width: 900px) { .text-servicio-5 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 15: 901px - 992px */ @media (min-width: 901px) and (max-width: 992px) { .text-servicio-5 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 16: 993px - 1100px */ @media (min-width: 993px) and (max-width: 1100px) { .text-servicio-5 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 17: 1101px - 1200px */ @media (min-width: 1101px) and (max-width: 1200px) { .text-servicio-5 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 18: 1201px - 1400px */ @media (min-width: 1201px) and (max-width: 1400px) { .text-servicio-5 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 19: >1400px (Pantallas grandes) */ @media (min-width: 1401px) { .text-servicio-5 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* ============================================================================ SERVICIO 6: MANTENIMIENTO MAYOR Y MENOR DE EQUIPOS - BLOQUE DE TEXTO ============================================================================ CONFIGURACIÓN BASE: position: relative - Permite usar left/top para mover el bloque de texto DISPOSITIVO DEL USUARIO: 468x858 → Breakpoint 451-480px (marcado con ★) CÓMO ENCONTRAR TU BLOQUE DE TEXTO EN HTML: Busca en index.html la sección del servicio 6, encontrarás algo como:

Servicios Integrados

GEP S.A.S. brinda soluciones integrales...

Agrega la clase "text-servicio-6" al div col-lg-6:
============================================================================ */ /* Configuración base - NECESARIA para que funcione el posicionamiento */ .text-servicio-6 { position: relative !important; } /* Breakpoint 1: ≤320px (Dispositivos muy pequeños) */ @media (max-width: 320px) { .text-servicio-6 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 2: 321px - 340px */ @media (min-width: 321px) and (max-width: 340px) { .text-servicio-6 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 3: 341px - 360px */ @media (min-width: 341px) and (max-width: 360px) { .text-servicio-6 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 4: 361px - 390px */ @media (min-width: 361px) and (max-width: 390px) { .text-servicio-6 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 5: 391px - 420px */ @media (min-width: 391px) and (max-width: 420px) { .text-servicio-6 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 6: 421px - 450px */ @media (min-width: 421px) and (max-width: 450px) { .text-servicio-6 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* ★ Breakpoint 7: 451px - 480px → TU DISPOSITIVO (468x858) ★ */ @media (min-width: 451px) and (max-width: 480px) { .text-servicio-6 { left: 0px !important; /* Ajusta este valor para mover horizontalmente */ top: -340px !important; /* Ajusta este valor para mover verticalmente */ transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 8: 481px - 520px */ @media (min-width: 481px) and (max-width: 520px) { .text-servicio-6 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 9: 521px - 550px */ @media (min-width: 521px) and (max-width: 550px) { .text-servicio-6 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 10: 551px - 600px */ @media (min-width: 551px) and (max-width: 600px) { .text-servicio-6 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 11: 601px - 650px */ @media (min-width: 601px) and (max-width: 650px) { .text-servicio-6 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 12: 651px - 700px */ @media (min-width: 651px) and (max-width: 700px) { .text-servicio-6 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 13: 701px - 800px */ @media (min-width: 701px) and (max-width: 800px) { .text-servicio-6 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 14: 801px - 900px */ @media (min-width: 801px) and (max-width: 900px) { .text-servicio-6 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 15: 901px - 992px */ @media (min-width: 901px) and (max-width: 992px) { .text-servicio-6 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 16: 993px - 1100px */ @media (min-width: 993px) and (max-width: 1100px) { .text-servicio-6 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 17: 1101px - 1200px */ @media (min-width: 1101px) and (max-width: 1200px) { .text-servicio-6 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 18: 1201px - 1400px */ @media (min-width: 1201px) and (max-width: 1400px) { .text-servicio-6 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 19: >1400px (Pantallas grandes) */ @media (min-width: 1401px) { .text-servicio-6 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* ============================================================================ SERVICIO 7: VENTA DE EQUIOPOS Y REPUESTOS - BLOQUE DE TEXTO ============================================================================ CONFIGURACIÓN BASE: position: relative - Permite usar left/top para mover el bloque de texto DISPOSITIVO DEL USUARIO: 468x858 → Breakpoint 451-480px (marcado con ★) CÓMO ENCONTRAR TU BLOQUE DE TEXTO EN HTML: Busca en index.html la sección del servicio 7, encontrarás algo como:

Servicios Integrados

GEP S.A.S. brinda soluciones integrales...

Agrega la clase "text-servicio-7" al div col-lg-6:
============================================================================ */ /* Configuración base - NECESARIA para que funcione el posicionamiento */ .text-servicio-7 { position: relative !important; } /* Breakpoint 1: ≤320px (Dispositivos muy pequeños) */ @media (max-width: 320px) { .text-servicio-7 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 2: 321px - 340px */ @media (min-width: 321px) and (max-width: 340px) { .text-servicio-7 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 3: 341px - 360px */ @media (min-width: 341px) and (max-width: 360px) { .text-servicio-7 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 4: 361px - 390px */ @media (min-width: 361px) and (max-width: 390px) { .text-servicio-7 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 5: 391px - 420px */ @media (min-width: 391px) and (max-width: 420px) { .text-servicio-7 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 6: 421px - 450px */ @media (min-width: 421px) and (max-width: 450px) { .text-servicio-7 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* ★ Breakpoint 7: 451px - 480px → TU DISPOSITIVO (468x858) ★ */ @media (min-width: 451px) and (max-width: 480px) { .text-servicio-7 { left: 0px !important; /* Ajusta este valor para mover horizontalmente */ top: -270px !important; /* Ajusta este valor para mover verticalmente */ transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 8: 481px - 520px */ @media (min-width: 481px) and (max-width: 520px) { .text-servicio-7 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 9: 521px - 550px */ @media (min-width: 521px) and (max-width: 550px) { .text-servicio-7 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 10: 551px - 600px */ @media (min-width: 551px) and (max-width: 600px) { .text-servicio-7 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 11: 601px - 650px */ @media (min-width: 601px) and (max-width: 650px) { .text-servicio-7 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 12: 651px - 700px */ @media (min-width: 651px) and (max-width: 700px) { .text-servicio-7 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 13: 701px - 800px */ @media (min-width: 701px) and (max-width: 800px) { .text-servicio-7 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 14: 801px - 900px */ @media (min-width: 801px) and (max-width: 900px) { .text-servicio-7 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 15: 901px - 992px */ @media (min-width: 901px) and (max-width: 992px) { .text-servicio-7 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 16: 993px - 1100px */ @media (min-width: 993px) and (max-width: 1100px) { .text-servicio-7 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 17: 1101px - 1200px */ @media (min-width: 1101px) and (max-width: 1200px) { .text-servicio-7 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 18: 1201px - 1400px */ @media (min-width: 1201px) and (max-width: 1400px) { .text-servicio-7 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 19: >1400px (Pantallas grandes) */ @media (min-width: 1401px) { .text-servicio-7 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* ============================================================================ SERVICIO 8: METROLOGIA - BLOQUE DE TEXTO ============================================================================ CONFIGURACIÓN BASE: position: relative - Permite usar left/top para mover el bloque de texto DISPOSITIVO DEL USUARIO: 468x858 → Breakpoint 451-480px (marcado con ★) CÓMO ENCONTRAR TU BLOQUE DE TEXTO EN HTML: Busca en index.html la sección del servicio 8, encontrarás algo como:

Servicios Integrados

GEP S.A.S. brinda soluciones integrales...

Agrega la clase "text-servicio-8" al div col-lg-6:
============================================================================ */ /* Configuración base - NECESARIA para que funcione el posicionamiento */ .text-servicio-8 { position: relative !important; } /* Breakpoint 1: ≤320px (Dispositivos muy pequeños) */ @media (max-width: 320px) { .text-servicio-8 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 2: 321px - 340px */ @media (min-width: 321px) and (max-width: 340px) { .text-servicio-8 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 3: 341px - 360px */ @media (min-width: 341px) and (max-width: 360px) { .text-servicio-8 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 4: 361px - 390px */ @media (min-width: 361px) and (max-width: 390px) { .text-servicio-8 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 5: 391px - 420px */ @media (min-width: 391px) and (max-width: 420px) { .text-servicio-8 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 6: 421px - 450px */ @media (min-width: 421px) and (max-width: 450px) { .text-servicio-8 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* ★ Breakpoint 7: 451px - 480px → TU DISPOSITIVO (468x858) ★ */ @media (min-width: 451px) and (max-width: 480px) { .text-servicio-8 { left: 0px !important; /* Ajusta este valor para mover horizontalmente */ top: -450px !important; /* Ajusta este valor para mover verticalmente */ transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 8: 481px - 520px */ @media (min-width: 481px) and (max-width: 520px) { .text-servicio-8 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 9: 521px - 550px */ @media (min-width: 521px) and (max-width: 550px) { .text-servicio-8 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 10: 551px - 600px */ @media (min-width: 551px) and (max-width: 600px) { .text-servicio-8 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 11: 601px - 650px */ @media (min-width: 601px) and (max-width: 650px) { .text-servicio-8 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 12: 651px - 700px */ @media (min-width: 651px) and (max-width: 700px) { .text-servicio-8 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 13: 701px - 800px */ @media (min-width: 701px) and (max-width: 800px) { .text-servicio-8 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 14: 801px - 900px */ @media (min-width: 801px) and (max-width: 900px) { .text-servicio-8 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 15: 901px - 992px */ @media (min-width: 901px) and (max-width: 992px) { .text-servicio-8 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 16: 993px - 1100px */ @media (min-width: 993px) and (max-width: 1100px) { .text-servicio-8 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 17: 1101px - 1200px */ @media (min-width: 1101px) and (max-width: 1200px) { .text-servicio-8 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 18: 1201px - 1400px */ @media (min-width: 1201px) and (max-width: 1400px) { .text-servicio-8 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 19: >1400px (Pantallas grandes) */ @media (min-width: 1401px) { .text-servicio-8 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* ============================================================================ SERVICIO 9: CONTRUCCION Y MONTAJE DE FACILIDADES - SOLDADURA - BLOQUE DE TEXTO ============================================================================ CONFIGURACIÓN BASE: position: relative - Permite usar left/top para mover el bloque de texto DISPOSITIVO DEL USUARIO: 468x858 → Breakpoint 451-480px (marcado con ★) CÓMO ENCONTRAR TU BLOQUE DE TEXTO EN HTML: Busca en index.html la sección del servicio 9, encontrarás algo como:

Servicios Integrados

GEP S.A.S. brinda soluciones integrales...

Agrega la clase "text-servicio-9" al div col-lg-6:
============================================================================ */ /* Configuración base - NECESARIA para que funcione el posicionamiento */ .text-servicio-9 { position: relative !important; } /* Breakpoint 1: ≤320px (Dispositivos muy pequeños) */ @media (max-width: 320px) { .text-servicio-9 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 2: 321px - 340px */ @media (min-width: 321px) and (max-width: 340px) { .text-servicio-9 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 3: 341px - 360px */ @media (min-width: 341px) and (max-width: 360px) { .text-servicio-9 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 4: 361px - 390px */ @media (min-width: 361px) and (max-width: 390px) { .text-servicio-9 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 5: 391px - 420px */ @media (min-width: 391px) and (max-width: 420px) { .text-servicio-9 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 6: 421px - 450px */ @media (min-width: 421px) and (max-width: 450px) { .text-servicio-9 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* ★ Breakpoint 7: 451px - 480px → TU DISPOSITIVO (468x858) ★ */ @media (min-width: 451px) and (max-width: 480px) { .text-servicio-9 { left: 0px !important; /* Ajusta este valor para mover horizontalmente */ top: -460px !important; /* Ajusta este valor para mover verticalmente */ transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 8: 481px - 520px */ @media (min-width: 481px) and (max-width: 520px) { .text-servicio-9 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 9: 521px - 550px */ @media (min-width: 521px) and (max-width: 550px) { .text-servicio-9 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 10: 551px - 600px */ @media (min-width: 551px) and (max-width: 600px) { .text-servicio-9 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 11: 601px - 650px */ @media (min-width: 601px) and (max-width: 650px) { .text-servicio-9 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 12: 651px - 700px */ @media (min-width: 651px) and (max-width: 700px) { .text-servicio-9 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 13: 701px - 800px */ @media (min-width: 701px) and (max-width: 800px) { .text-servicio-9 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 14: 801px - 900px */ @media (min-width: 801px) and (max-width: 900px) { .text-servicio-9 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 15: 901px - 992px */ @media (min-width: 901px) and (max-width: 992px) { .text-servicio-9 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 16: 993px - 1100px */ @media (min-width: 993px) and (max-width: 1100px) { .text-servicio-9 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 17: 1101px - 1200px */ @media (min-width: 1101px) and (max-width: 1200px) { .text-servicio-9 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 18: 1201px - 1400px */ @media (min-width: 1201px) and (max-width: 1400px) { .text-servicio-9 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* Breakpoint 19: >1400px (Pantallas grandes) */ @media (min-width: 1401px) { .text-servicio-9 { left: 0px !important; top: 0px !important; transform: translateX(0%) translateY(0%) !important; } } /* ============================================================================ GUÍA DE USO RÁPIDA - SERVICIO 1 ============================================================================ EJEMPLO 1: Mover el texto 30px hacia abajo en tu dispositivo (468x858) ------------------------------------------------------------------------- Busca el breakpoint 451-480px (marcado con ★) y cambia: top: 0px !important; → top: 30px !important; EJEMPLO 2: Mover el texto 50px a la izquierda ------------------------------------------------------------------------- Busca el breakpoint 451-480px y cambia: left: 0px !important; → left: -50px !important; EJEMPLO 3: Mover el texto 20px arriba y 10px a la derecha ------------------------------------------------------------------------- Busca el breakpoint 451-480px y cambia: left: 0px !important; → left: 10px !important; top: 0px !important; → top: -20px !important; PRÓXIMOS PASOS: =============== 1. Incluye este CSS en index.html (): 2. Agrega la clase text-servicio-1 al div del texto en HTML:
3. Prueba modificando los valores de top/left en el breakpoint 451-480px 4. Una vez que funcione, copia toda la estructura del SERVICIO 1 para crear SERVICIO 2, SERVICIO 3, etc., cambiando: - .text-servicio-1 → .text-servicio-2 - Los valores de posición según necesites ============================================================================ */