Skip to main content
Emil
Contributor ⭐️⭐️⭐️
Aug 27, 2020 2:15 PM UTC
Solved

Community Hero Banner

Hi guys, 

I have a question, we are working on re-branding our ranking structure which is going well and my next project is to redesign our homepage banner. However, the problem that I am having is that I can’t see any option to upload a version of the Hero banner for Mobile and another version for desktop.

When you think about how small the banner is on mobile there is very little room for creativity here. Is there not a way or a function which allows you to show mobile users 1 banner and desktop or tablet users another? 

thanks, 

Emil  

    SmartlyGreg
    SmartlyGregAnswer
    Helper ⭐️⭐️⭐️
    Jan 19, 2022 2:25 AM UTC

    @Julian in the meantime I’ve added a bit of custom CSS to fix the mobile issue. ( @Suvi Lehtovaara maybe no longer relevant for you with your new hero image, hopefully that wasn’t why you changed...)
     

    We use an image with a gap in the center for the search bar and title:

     

    Which works great on full width screens:

     

    But then gets messed up by default on mobile:

     

    So with this small custom CSS code:

    .brand-hero {
      background-repeat: no-repeat;
      background-position: center;
      background-color: #8D19A5;
    }
    .custom-hero-banner {
      max-height: 12vw;
      min-height:250px;
    }

    (Note: Background colour matches our image to ensure text is legible even before the image loads)

     

    We ensure the experience stays consistent throughout screen sizes, like mobile:

     

    Or tablet:

     

    View in thread

    15 replies

    Suvi Lehtovaara
    Suvi Lehtovaara
    Helper ⭐️⭐️
    Sep 1, 2020 12:04 PM UTC

    I have this very same question as @Emil !

    We’ve just changed our hero banner and it works fine on desktop:

     

     

    But very poorly on mobile:

     

     

    Translate
    https://yhteiso.elisa.fi/
      EmilAuthor
      Contributor ⭐️⭐️⭐️
      Sep 8, 2020 10:27 AM UTC

      @Suvi Lehtovaara Hey, I just wanted to ask, have you had any response to our question yet? 

      Translate
      Suvi Lehtovaara
      Suvi Lehtovaara
      Helper ⭐️⭐️
      Sep 8, 2020 11:06 AM UTC

      @Suvi Lehtovaara Hey, I just wanted to ask, have you had any response to our question yet? 

      No, I have not :frowning2:

      @Julian, maybe you can help us?

      Translate
      https://yhteiso.elisa.fi/
      ErikT
      ErikT
      Contributor ⭐️⭐️
      Sep 10, 2020 6:51 AM UTC

      Have not tried it myself yet but I think you should be able to solve it with css media queries by adding it to custom css. But you’ll probably need to host intended image for smaller screens somewhere to make it work. :thinking:

      @Julian, what do you think?

       

       

      Translate
      Julian
      Julian
      Gainsight Employee ⭐️⭐️⭐️
      Sep 11, 2020 3:58 PM UTC

      Yes, I know about this. I had a quick chat yesterday about it with our product designer, as we also want to improve this for you. We surely recognize that it can be a challenge to find an image that is working on all the different viewports.

      I think you could work with custom CSS, I will ask some colleagues who actually know way better how this could be done so that I can share some options with you.

      Translate
      I follow my nose, it always knows
        EmilAuthor
        Contributor ⭐️⭐️⭐️
        Sep 16, 2020 11:54 AM UTC

        @Julian and @ErikT thank you for your response it would be really good if you could find out and let us know as this would be a massive help! 

        Translate
        Suvi Lehtovaara
        Suvi Lehtovaara
        Helper ⭐️⭐️
        Oct 13, 2020 7:04 AM UTC

        Yes, I know about this. I had a quick chat yesterday about it with our product designer, as we also want to improve this for you. We surely recognize that it can be a challenge to find an image that is working on all the different viewports.

        I think you could work with custom CSS, I will ask some colleagues who actually know way better how this could be done so that I can share some options with you.

        @Julian Do you have any suggestions for custom CSS options?

        Translate
        https://yhteiso.elisa.fi/
        EmilAuthor
        Contributor ⭐️⭐️⭐️
        Oct 13, 2020 4:22 PM UTC

        Hi Suvi, 

        That sounds great, it would really be beneficial to a lot of platform users if this could be rolled out, as it is extremely difficult to have any creativity due to the limitations on the space that is shown when viewing on mobile. 

        That other option sounds good, but also complex. So if you could get someone who could explain this is a detailed way, that would be great. 

        Translate
        EmilAuthor
        Contributor ⭐️⭐️⭐️
        Mar 3, 2021 4:23 PM UTC

        @Julian Is there anyway this topic can be converted into an idea to allow other users to vote on it for development?

        Translate
        SmartlyGreg
        SmartlyGreg
        Helper ⭐️⭐️⭐️
        Dec 18, 2021 1:20 PM UTC

        @Julian has the above happened? I’d love to upvote that idea!

        Translate
          Show more replies
          Terms & ConditionsAccessibility statement