¿Cómo mover el bloque dentro del banner en la versión móvil del tema Refresh?

Store Design

Topic summary

Un usuario busca ayuda para reposicionar el bloque de título y subtítulo dentro del banner en la versión móvil del tema Refresh de Shopify, para que coincida con la disposición de escritorio.

Solución propuesta:

  • Se proporcionó código CSS personalizado para agregar al archivo base.css
  • El código utiliza position: absolute con transformaciones para centrar el contenido del banner en móviles (pantallas menores a 750px)

Problema persistente:

  • A pesar de implementar el código correctamente, el usuario reporta que el banner sigue mostrándose igual en su iPhone 12
  • El problema persiste en Safari, Google Chrome y la app de Shopify
  • Curiosamente, la solución funciona correctamente en las pruebas del colaborador que brinda soporte

Estado actual:
La discusión permanece sin resolver. El colaborador solicita acceso directo a la tienda para investigar el problema más a fondo, ya que el código debería funcionar pero no lo hace en el dispositivo del usuario.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
10

Hola @Dateruelo ,

Bien, probemos este. Elimine el código anterior y reemplácelo con el siguiente

@media screen and (max-width: 750px) {
	.slideshow .slideshow__text-wrapper.banner__content {
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		width: 80% !important;
		-webkit-transform: translate(-50%, -50%) !important;
		-ms-transform: translate(-50%, -50%) !important;
		transform: translate(-50%, -50%) !important;
	}

	.slideshow .slideshow__text-wrapper.banner__content .banner__box {
		border-radius: 20px !important;
	}
}