Zendesk Guide: Hero Banner Search function has moved and is too wide!

8 Commentaires

  • Ifra Saqlain
    Community Moderator

    Hey Grace,

    If you share the HTML code of hero banner so I'll catch your CSS bug and provide the exact and fixed code. You will have to just copy and paste.

    Thanks

    Team

    0
  • grace paik

    Sure, Should I copy my CSS?

    0
  • Ifra Saqlain
    Community Moderator

    You should have share your HTML code. How can I figure out the bug without html structure?

    0
  • grace paik

    Here is my HTML code: THANK YOU Ifra Saqlain!

    <h1 class="visibility-hidden">{{ help_center.name }}</h1>

    <section id="main-content" class="section hero">
    <div class="hero-inner">
    <h2 class="visibility-hidden">{{ t 'search' }}</h2>
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon" aria-hidden="true">
    <circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
    <path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
    </svg>
    {{search submit=false instant=settings.instant_search class='search search-full'}}
    </div>
    </section>

    <div class="container">
    <section class="section knowledge-base">
    <h2 class="visibility-hidden">{{ t 'categories' }}</h2>
    <section class="categories blocks">
    <ul class="blocks-list">
    {{#each categories}}
    {{#if ../has_multiple_categories}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <span class="blocks-item-title">{{name}}</span>
    <span class="blocks-item-description">{{excerpt description}}</span>
    </a>
    </li>
    {{else}}
    {{#each sections}}
    <li class="blocks-item">
    <a href='{{url}}' class="blocks-item-link">
    <span class="blocks-item-title">
    {{name}}
    </span>
    <span class="blocks-item-description">{{excerpt description}}</span>
    </a>
    </li>
    {{/each}}
    {{/if}}
    {{/each}}
    </ul>
    {{pagination}}
    </section>

    {{#if promoted_articles}}
    <section class="articles">
    <h2>{{t 'promoted_articles'}}</h2>
    <ul class="article-list promoted-articles">
    {{#each promoted_articles}}
    <li class="promoted-articles-item">
    <a href="{{url}}">
    {{title}}

    {{#if internal}}
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" class="icon-lock" title="{{t 'internal'}}">
    <rect width="12" height="9" x="2" y="7" fill="currentColor" rx="1" ry="1"/>
    <path fill="none" stroke="currentColor" d="M4.5 7.5V4a3.5 3.5 0 017 0v3.5"/>
    </svg>
    {{/if}}
    </a>
    </li>
    {{/each}}
    </ul>
    </section>
    {{/if}}
    </section>

    {{#if help_center.community_enabled}}
    <section class="section home-section community">
    <h2>{{t 'community'}}</h2>
    {{#link 'community' class='community-link'}}
    {{t 'join_conversation'}}
    {{/link}}

    <div class="community-image"></div>
    </section>
    {{/if}}

    <section class="section home-section activity">
    {{#if settings.show_recent_activity}}
    {{recent_activity}}
    {{/if}}
    </section>
    </div>

    0
  • Ifra Saqlain
    Community Moderator

    Compare this given CS code with your own CSS code :

    /***** Hero component *****/
    .hero {
    background-image: url($....);
    background-position: center;
    background-size: cover;
    height: 300px;
    padding: 0 20px;
    text-align: center;
    width: 100%;
    }

    .hero-inner {
    position: relative; // I think position is removed from your code
    top: 50%;
    transform: translateY(-50%);
    max-width: 610px;
    margin: 0 auto;
    }

     

    And add the container into your hero <section>:

    <h1 class="visibility-hidden">{{ help_center.name }}</h1>
    <section id="main-content" class="section hero container"> // I added the container class for stop being wide.

     

    If any issue let me know :)

    Thanks

    Team

     

    0
  • grace paik

    I don't know how to code, but i don't think i did it correctly:

    0
  • Ifra Saqlain
    Community Moderator

    okay, can you share your public url of your hc.

    There is missing .hero.... code where must have position relative.
    Please compare your code with default Copenhagen theme.
    I also compared something is missing in your hero code.

    Thanks

    0
  • Pulkit Pandey
    Community Moderator

    Hi grace paik

    Are you still caught up under this issue 

    Thanks 

    Pulkit

    0

Vous devez vous connecter pour laisser un commentaire.

Réalisé par Zendesk