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

[Dateruelo]

Hola a todos,

Estoy utilizando el tema Refresh en mi tienda Shopify y necesito mover el bloque de título y subtítulo dentro del banner en la versión móvil, de la misma manera que aparece en la versión de escritorio. ¿Podrían indicarme qué código debo añadir y en qué parte del archivo debo colocarlo para lograr esto? Estoy buscando una solución específica para el tema Refresh y cualquier ayuda con los detalles exactos del código sería muy apreciada.

Gracias de antemano por su ayuda.

[MaverickStudio]

¡Oye, @Dateruelo 

¿Puedes enviar el enlace a tu tienda y la contraseña, si corresponde?

Gracias

[Dateruelo]

Os paso el link para acceder a la tienda online: https://df4486-4d.myshopify.com/ con la contraseña: cheort

[MaverickStudio]

Hey @Dateruelo ,

Esta es una solución fácil. Siga el paso a continuación 
Paso 1: Vaya a Tienda en línea> Personalizar tema
Paso 2: haz clic en los tres puntos al lado del nombre del tema en la parte superior izquierda
Paso 3: haga clic en Editar código.
Paso 4: busque base.css y agregue lo siguiente al final del archivo.

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

	.banner__box {
		border-radius: 20px;
	}
}

Steps

Demo

[Dateruelo]

Queda así 

 

[MaverickStudio]

Hey @Dateruelo ,

Parece que hay un código incorrecto en su base.css. ¿Puedes confirmar que este es el caso? Además, no puedo ver aquí el bloque de código que envié anteriormente.

Elimina todo lo que esté resaltado hasta el final. Y luego agrega el bloque de código que envié.

Nota: La imagen proviene de las herramientas de desarrollo y no del editor de temas. Por lo tanto, elimine los elementos correctos después del final de "indeterminateAnimation".

[Dateruelo]

Ya esta y sigue saliendo así 

[MaverickStudio]

Hola @Dateruelo 

Funciona bien en Chrome y Safari. ¿Puedes abrir en una pestaña de incógnito o en una pestaña nueva y ver si sigue igual?

¿Qué modelo de teléfono tienes?

[Dateruelo]

 

Tengo un iphone 12, lo he abierto desde safari, google y shopify y sale igual en todos 

[MaverickStudio]

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;
	}
}

[Dateruelo]

Nada, sigue mostrándose igual

 

[MaverickStudio]

Hola @Dateruelo ,

Ese es un problema extraño. ¿Puedes darme el acceso de colaborador y enviarme un mensaje directo con el código PIN para que pueda echar un vistazo?

https://help.shopify.com/en/manual/your-account/staff-accounts/collaborator-accounts