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

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

Dateruelo
New Member
10 0 0

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.

Replies 11 (11)

MaverickStudio
Shopify Partner
101 32 34

¡Oye, @Dateruelo 

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

Gracias

♥ If you found my solution helpful, please consider giving it a  Like and marking it as the  ✔ Accepted Solution


Try our WhatsApp Chat Button Widget with multipe agents. Supachat: WhatsApp Chat Button


Find the cheapest fuel in Australia with FuelSpot. FuelSpot:Cheapest fuel prices near me


A Product of  Maverick Studio

Dateruelo
New Member
10 0 0

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

MaverickStudio
Shopify Partner
101 32 34

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
Screenshot 2024-07-22 230019.pngScreenshot 2024-07-23 103512.png

 

Demo
Screenshot 2024-07-31 101339.png

♥ If you found my solution helpful, please consider giving it a  Like and marking it as the  ✔ Accepted Solution


Try our WhatsApp Chat Button Widget with multipe agents. Supachat: WhatsApp Chat Button


Find the cheapest fuel in Australia with FuelSpot. FuelSpot:Cheapest fuel prices near me


A Product of  Maverick Studio

Dateruelo
New Member
10 0 0

Queda así 405F2ECC-0CEA-482B-AF83-3C5A475A837A.png

MaverickStudio
Shopify Partner
101 32 34

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".

Screenshot 2024-07-31 110954.png

♥ If you found my solution helpful, please consider giving it a  Like and marking it as the  ✔ Accepted Solution


Try our WhatsApp Chat Button Widget with multipe agents. Supachat: WhatsApp Chat Button


Find the cheapest fuel in Australia with FuelSpot. FuelSpot:Cheapest fuel prices near me


A Product of  Maverick Studio

Dateruelo
New Member
10 0 0

Ya esta y sigue saliendo así 

MaverickStudio
Shopify Partner
101 32 34

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?

WhatsApp Image 2024-07-31 at 11.25.11 AM.jpegWhatsApp Image 2024-07-31 at 11.23.27 AM.jpeg

♥ If you found my solution helpful, please consider giving it a  Like and marking it as the  ✔ Accepted Solution


Try our WhatsApp Chat Button Widget with multipe agents. Supachat: WhatsApp Chat Button


Find the cheapest fuel in Australia with FuelSpot. FuelSpot:Cheapest fuel prices near me


A Product of  Maverick Studio

Dateruelo
New Member
10 0 0

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

9CB63592-3C3C-4784-B576-7CC6FA0BD7F2.png

MaverickStudio
Shopify Partner
101 32 34

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

 

♥ If you found my solution helpful, please consider giving it a  Like and marking it as the  ✔ Accepted Solution


Try our WhatsApp Chat Button Widget with multipe agents. Supachat: WhatsApp Chat Button


Find the cheapest fuel in Australia with FuelSpot. FuelSpot:Cheapest fuel prices near me


A Product of  Maverick Studio

Dateruelo
New Member
10 0 0

Nada, sigue mostrándose igual

0FA2BCE6-BBDA-4E05-B8CA-2AC582E20402.png

MaverickStudio
Shopify Partner
101 32 34

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

♥ If you found my solution helpful, please consider giving it a  Like and marking it as the  ✔ Accepted Solution


Try our WhatsApp Chat Button Widget with multipe agents. Supachat: WhatsApp Chat Button


Find the cheapest fuel in Australia with FuelSpot. FuelSpot:Cheapest fuel prices near me


A Product of  Maverick Studio