Deixando os links do banner horizontais na versão móvel

[undasein (Andres Garrido)]

Existe alguma maneira de fazer com que os links do banner na versão móvel apareçam horizontalmente em vez de verticalmente? Obrigado!

[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)]

Muito obrigado, por algum motivo não notei. Funciona perfeitamente!

[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)]

Aqui está um exemplo de código de como você pode personalizar o banner para que ele fique menos alto em telas pequenas:
Coloque isso na aba mobile da personalização do seu tema!

// Torna o banner de boas-vindas adaptado para tamanhos de tela pequenos
.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 ser ajustado de acordo com suas necessidades (é por isso que existem aninhamentos SCSS “vazios”).

Como está, fica assim no meu projeto atual:

---

edit: @Moin foi mais rápido do que eu em mencionar meus próprios ajustes… Bravo

[nathank (Nathan Kershaw)]

@Canapin

Aqui está um exemplo de código de como você pode personalizar o banner para que ele fique menos alto em telas pequenas:
Coloque isso na aba mobile da personalização do seu tema!

Esta é uma grande melhoria na aparência móvel do Banner de Boas-Vindas. Ontem mesmo, vi um novo usuário se inscrever no meu site via celular, e ele tropeçou no tamanho grande do banner; basicamente, ele não percebeu que precisava rolar para baixo para ver a ação. Por isso, tenho procurado algo melhor, e esse trecho de CSS é brilhante.

Tive que remover background-image: url($mobile-banner-bg); pois é claro que você retirou isso de um TC bifurcado.

@awesomerobot, você consideraria um PR para adicionar essa melhoria móvel ao Componente de Tema?

[awesomerobot (Kris)]

@nathankershaw

@awesomerobot, você consideraria um PR para adicionar este aprimoramento móvel ao Componente de Tema?

Claro, PRs são sempre bem-vindos.

[Kuro22]

@Canapin

Aqui está um exemplo de código de como você pode personalizar o banner para que ele fique menos alto em telas pequenas:
Coloque isso na aba mobile da personalização do seu tema!

@awesomerobot

@nathank

@awesomerobot, você consideraria um PR para adicionar essa melhoria mobile ao Componente de Tema?

claro, PRs são sempre bem-vindos

Olá @awesomerobot, como ainda não vi um PR para isso, acabei de criar um PR para adicionar a melhoria feita por @Canapin e adicionei duas localidades.

[nathank (Nathan Kershaw)]

Dei uma olhada e vi que você removeu as alterações de Locale conforme solicitado pela @team. No entanto, o PR foi fechado, então abri um novo para você:

Adapt the banner to mobile screens

[AquaL1te]

Incrível! Quando você acha que será mesclado?

[nathank (Nathan Kershaw)]

Não tenho certeza - @awesomerobot, meu PR está bom?

[awesomerobot (Kris)]

Parece bom para mim, mesclado agora. Obrigado!

[Andy_Clifton]

Legal! Mas o problema dos ícones verticais também ocorre em tablets, então usar apenas o CSS personalizado para dispositivos móveis começa em um tamanho de tela muito baixo. Infelizmente, o CSS personalizado do Discourse não permite segmentar tablets. Minha solução foi colocar o seguinte texto na guia CSS personalizado comum.

Ele também inclui correções para espaçamento indesejado à direita na visualização do tablet, e também escolhi aumentar o tamanho da fonte dos links para 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)]

Obrigado por esta informação!
Não fiz um pull request para o componente de tema com minha versão mobile porque não a testei em várias configurações. E sua mensagem mostra que o código mobile realmente precisaria de trabalho adicional