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:
base.cssposition: absolute con transformaciones para centrar el contenido del banner en móviles (pantallas menores a 750px)Problema persistente:
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.
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.
Os paso el link para acceder a la tienda online: https://df4486-4d.myshopify.com/ con la contraseña: cheort
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
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”.
Ya esta y sigue saliendo así
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?
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;
}
}
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
