Cómo Cambiar el Diseño del Paquete de Productos de Horizontal a Vertical en Móvil

Este artículo le muestra cómo cambiar el elemento Descuento por Paquete de Productos de un diseño horizontal a un diseño vertical en dispositivos móviles mediante CSS personalizado.

 Paso 1: Abrir el editor de Código personalizado

• En el editor de GemPages, pase el cursor sobre el elemento Descuento por paquete de productos .
• Haga clic con el botón derecho en el elemento.
• Seleccione Código personalizado.

Paso 2: Añadir el código CSS

Copia y pega el siguiente código CSS en el editor de código personalizado:

@media (max-width: 767px) { 
    .ElementClass gp-product-bundle-discount { 
           display: flex; 
           flex-direction: column; 
    } 
}

Paso 3: Reemplazar la clase del elemento

Reemplace .ElementClass por la clase CSS real de su elemento Descuento por paquete de productos.

Paso 4: Guardar y publicar

• Haga clic en Guardar.
• Publicar su página.
• Abra la página publicada o la Previsualizar para verificar que el paquete de productos ahora se muestra con un diseño vertical en dispositivos móviles.