Hacer que los enlaces del banner sean horizontales en la versión móvil

[undasein (Andres Garrido)]

¿Hay alguna forma de hacer que los enlaces del banner en la versión móvil aparezcan horizontalmente en lugar de verticalmente? ¡Gracias!

[Moin]

Third migration, once again for a niche forum (Volkswagen Campers vans)

Ooooh yes, absolutely! There is something “soothing” in this color scheme! Yes, I intend to share the feedback. After this future experience on vw-camper.fr, I also intend to extend it to uniyclist.com, where a chat feature has never been explicitly asked or wanted. Because of this, the experiment may be interesting: how the users will react? Positively or negatively? But since it’s kind of a two-step experience of several months each, It’s not for tomorrow… Sure. Be aware i…

[undasein (Andres Garrido)]

Muchas gracias, por alguna razón no me di cuenta. ¡Funciona perfectamente!

[Moin]

Third migration, once again for a niche forum (Volkswagen Campers vans)

I tweaked the code a tiny bit so there shouldn’t be any horizontal wrap on small screen by adding white-space: normal; on h3. Also, you can remove margin: 0 auto 0 !important; if you wish to keep a background image. It can look good. Example: [image]

[Canapin (Coin-coin le Canapin)]

Aquí tienes un ejemplo de código sobre cómo puedes personalizar el banner para que sea menos alto en pantallas pequeñas:
¡Pon esto en la pestaña móvil de la personalización de tu tema!

// Hace que el banner de bienvenida se adapte a tamaños de pantalla pequeños
.below-site-header-outlet.welcome-link-banner-connector {
    .welcome-link-banner-wrapper {
        background-image: url($mobile-banner-bg);
        background-size: cover;
        .welcome-wrapper {
            .featured-banner-link {
                flex-direction: row;
                padding-bottom: 0.5em;
                >div a {
                    padding: 0 5px;
                    h3 {
                        font-size: 0.75em;
                        white-space: normal;
                    }
                }
            }
        }
    }
}

Para ajustar según tus necesidades (por eso hay anidamientos SCSS “vacíos”).

Tal como está, se ve así en mi proyecto actual:

---

edición: @Moin fue más rápido que yo en mencionar mis propios ajustes… Bravo

[nathank (Nathan Kershaw)]

@Canapin

Aquí tienes un ejemplo de código de cómo puedes personalizar el banner para que sea menos alto en pantallas pequeñas:
¡Pon esto en la pestaña móvil de la personalización de tu tema!

Esta es una gran mejora en la apariencia móvil del Banner de Bienvenida. Ayer mismo vi a un nuevo usuario registrarse en mi sitio a través del móvil, y tropezó con el gran tamaño del banner; básicamente, no se dio cuenta de que tenía que desplazarse hacia abajo para ver la acción. Por lo tanto, he estado buscando algo mejor, y ese fragmento de CSS es brillante.

Tuve que eliminar background-image: url($mobile-banner-bg); ya que está claro que lo tomaste de un TC bifurcado.

@awesomerobot, ¿considerarías una PR para añadir esta mejora móvil al Componente de Tema?

[awesomerobot (Kris)]

@nathankershaw

@awesomerobot, ¿considerarías una PR para agregar esta mejora móvil al componente Temático?

Claro, las PR siempre son bienvenidas.

[Kuro22]

@Canapin

Aquí tienes un ejemplo de código de cómo puedes personalizar el banner para que no sea tan alto en pantallas pequeñas:
¡Pon esto en la pestaña móvil de la personalización de tu tema!

@awesomerobot

@nathank

@awesomerobot, ¿considerarías una PR para agregar esta mejora móvil al Componente de Tema?

seguro, las PRs siempre son bienvenidas

Hola @awesomerobot, dado que no he visto una PR para eso hasta ahora, acabo de crear una PR para agregar la mejora realizada por @Canapin, y agregué dos localizaciones.

[nathank (Nathan Kershaw)]

Eché un vistazo y vi que eliminaste los cambios de Locale según lo solicitado por @team. Sin embargo, el PR se cerró, así que abrí uno nuevo para ti:

Adapt the banner to mobile screens

[AquaL1te]

¡Genial! ¿Cuándo crees que se fusionará?

[nathank (Nathan Kershaw)]

No estoy seguro, @awesomerobot, ¿está bien mi PR?

[awesomerobot (Kris)]

Me parece bien, fusionado ahora. ¡Gracias!

[Andy_Clifton]

¡Genial! Pero el problema con los iconos verticales también ocurre en las tabletas, por lo que usar el CSS personalizado móvil comienza en un tamaño de pantalla demasiado bajo. Desafortunadamente, el CSS personalizado de Discourse no te permite apuntar a las tabletas. Mi solución fue colocar el siguiente texto en la pestaña CSS personalizado común.

También incluye correcciones para el espaciado no deseado a la derecha en la vista de tableta, y también elegí aumentar el tamaño de fuente de los enlaces a 1em.

@media (max-width: 768px) {
  .below-site-header-outlet.welcome-link-banner-connector {
    .welcome-link-banner-wrapper {
        background-size: cover;
        .welcome-wrapper {
            .welcome-content {
                p {
                    max-width: initial;
                }
            }
            .featured-banner-link {
                flex-direction: row;
                padding-bottom: 0.5em;
                div a {
                    padding: 0 5px;
                    h3 {
                        font-size: 1em;
                        white-space: normal;
                        }
                    }
                }
            }
        }
    }
}

[Canapin (Coin-coin le Canapin)]

¡Gracias por esta información!
No hice una solicitud de extracción al componente temático con mi versión móvil porque no la probé en varias configuraciones. Y tu mensaje muestra que el código móvil efectivamente necesitaría trabajo adicional