Making the banner links horizontal in mobile version

[undasein (Andres Garrido)]

Is there any way to make the banner links in the mobile version appear horizontally instead of vertically? Thanks!

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

Thank you very much, for some reason I didn’t notice it. It works perfectly!

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

Here’s an example code of how you can customize the banner to look less tall on small screens:
Put this in the mobile tab of your theme customization!

// Makes the welcome banner adapted to small screen sizes
.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;
                    }
                }
            }
        }
    }
}

To be tweaked regarding your needs (that’s why there are “empty” SCSS nests).

As it is, it looks like this on my current project:

---

edit: @Moin was faster than me to mention my own tweaks… Bravo

[nathank (Nathan Kershaw)]

@Canapin

Here’s an example code of how you can customize the banner to look less tall on small screens:
Put this in the mobile tab of your theme customization!

This is a vast improvement in the mobile appearance of the Welcome Banner. Just yesterday I watched a new user sign up to my site via mobile, and they tripped up on the large size of the banner; basically they didn’t realise that they had to scroll down to see the action. Hence I’ve been hunting for something better, and that snippet of CSS is brilliant.

I had to trim out background-image: url($mobile-banner-bg); as it is clear you lifted that from a forked TC.

@awesomerobot, would you consider a PR to add this Mobile enhancement to the Theme Component?

[awesomerobot (Kris)]

@nathankershaw

@awesomerobot, would you consider a PR to add this Mobile enhancement to the Theme Component?

sure PRs are always welcome

[Kuro22]

@Canapin

Here’s an example code of how you can customize the banner to look less tall on small screens:
Put this in the mobile tab of your theme customization!

@awesomerobot

@nathank

@awesomerobot, would you consider a PR to add this Mobile enhancement to the Theme Component?

sure PRs are always welcome

Hi @awesomerobot, given that I haven’t seen a PR for that so far, I just created a PR to add the enhancement made by @Canapin, and added two locales.

[nathank (Nathan Kershaw)]

I took a look and saw that you removed the Locale changes as requested by @team. However, the PR was closed so I opened a new one for you:

Adapt the banner to mobile screens

[AquaL1te]

Awesome! When do you think it will get merged?

[nathank (Nathan Kershaw)]

I’m not sure - @awesomerobot, is my PR okay?

[awesomerobot (Kris)]

Looks good to me, merged now. Thanks!

[Andy_Clifton]

Nice! But the problem with vertical icons also occurs on tablets, so just using the mobile custom CSS starts at too low a screen size. Unfortunately Discourse custom CSS doesn’t let you target tablets. My solution was to put the following text in the common custom CSS tab.

It also includes fixes for unwanted spacing on the right in the tablet view, and I also chose to increase the font size for the links to 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)]

Thanks for this info!
I didn’t do a pull request to the theme component with my mobile version because I didn’t test it in various configurations. And your message shows that the mobile code would need indeed additional work