Making the banner links horizontal in mobile version

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

4 Likes
4 Likes

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

4 Likes
5 Likes

Here’s an example code of how you can customize the banner to look less tall on small screens:
:warning: 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 :clap: :smile:

11 Likes

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?

6 Likes

sure PRs are always welcome

3 Likes

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. :wink:

6 Likes

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:

6 Likes

Awesome! When do you think it will get merged?

2 Likes

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

5 Likes

Looks good to me, merged now. Thanks!

6 Likes

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

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 :slight_smile:

3 Likes