Help Center : Adding article in white space beside "Submit Request field"

Hey Salim, use the below code to add the promoted article beside the form:

Code to be embedded: 

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





Screenshot for the same:







Output:

If any confusion, let me know :)

Thanks

Team

Hi @ifra

Thank you for the reply and solution. I tried adding it at the end of the following templates but it did not work. Am I doing it wrong? (removed them in the image)

Update: It shows but it shows like this:

See code below @ifra

<div class="hero-pages">
   <div class="container">
      <nav class="sub-nav">
         {{breadcrumbs}}
         <div class="search-container">
            {{search submit=false}}
         </div>
      </nav>
      <h1 class="request-heading">
         {{t 'submit_a_request'}}
         <span class="follow-up-hint">
         {{follow_up}}
         </span>
      </h1>
   </div>
</div>
<div class="form-cont">
   <div id="main-content" class="form">
      {{request_form wysiwyg=true}}
   </div>
  
  
 {{#if promoted_articles}}
    <section class="section articles">
     <h2>{{t 'promoted_articles'}}</h2>
      <ul class="article-list promoted-articles">
        {{#each promoted_articles}}
        <li class="promoted-articles-item">
          <a href="{{url}}" title="{{title}}">
            {{title}}
          </a>
        </li>
        {{/each}}
      </ul>
    </section>
    {{/if}}
  
</div>

@Salim, replace your code with the given below, new_request_page.hbs :-

<div class="hero-pages">
   <div class="container">
      <nav class="sub-nav">
         {{breadcrumbs}}
         <div class="search-container">
            {{search submit=false}}
         </div>
      </nav>
     </div>
</div>
<div class="container req-form">
  <div class="form-cont">
      <h1 class="request-heading">
         {{t 'submit_a_request'}}
         <span class="follow-up-hint">
         {{follow_up}}
         </span>
      </h1>
   


   <div id="main-content" class="form">
      {{request_form wysiwyg=true}}
   </div>
  </div>
  
  
 {{#if promoted_articles}}
    <section class="section promoted-articles">
     <h1>{{t 'promoted_articles'}}</h1>
      <ul class="article-list promoted-articles">
        {{#each promoted_articles}}
        <li class="promoted-articles-item">
          <a href="{{url}}" title="{{title}}">
            {{title}}
          </a>
        </li>
        {{/each}}
      </ul>
    </section>
    {{/if}}
  </div>

Go to your style.css file and copy paste the CSS code at the bottom area:-

.container.req-form{
  display: flex;
    flex-direction: column;
}

.section.promoted-articles {
      display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 0 100%;
    margin-left: 0;
  margin-top:40px;
}

.promoted-articles .promoted-articles-item{
  width:100%;
}

@media(min-width:992px){
  .section.promoted-articles {
    width: 40%;
    flex: 1 0 40%;
    margin-left: 40px;
    margin-top:0;
}
  .container.req-form{
    flex-direction: row;
}
}

Output is:-

Thanks

Hi @ifra 

I've followed the instructions, it's changed however it still shows at the bottom

It also updated the format of my main page promoted article so I removed the code from style.css

Update your CSS code:

.container.req-form{
  display: flex;
    flex-direction: column;
}

.req-form .section.promoted-articles {
      display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    flex: 1 0 100%;
    margin-left: 0;
  margin-top:40px;
}

.req-form .promoted-articles-item{
      width: 100%;
    flex: 1 0 100%;
}

@media(min-width:992px){
  .req-form .section.promoted-articles {
    width: 40%;
    flex: 1 0 40%;
    margin-left: 40px;
    margin-top:0;
}
  .container.req-form{
    flex-direction: row;
}
}

Still no luck, I copied the above code at the end of the style.css but the issue persists. @ifra

@Salim, did you copy and paste your HBS code on new request page ? if not , do this.

Remove your new_request_page.hbs code and copy-paste the below code, I have added some divs with the classes in your code which I have given above but you didn't do copy-paste.

<div class="hero-pages">
   <div class="container">
      <nav class="sub-nav">
         {{breadcrumbs}}
         <div class="search-container">
            {{search submit=false}}
         </div>
      </nav>
     </div>
</div>
<div class="container req-form">
  <div class="form-cont">
      <h1 class="request-heading">
         {{t 'submit_a_request'}}
         <span class="follow-up-hint">
         {{follow_up}}
         </span>
      </h1>
   


   <div id="main-content" class="form">
      {{request_form wysiwyg=true}}
   </div>
  </div>
  
  
 {{#if promoted_articles}}
    <section class="section promoted-articles">
     <h1>{{t 'promoted_articles'}}</h1>
      <ul class="article-list promoted-articles">
        {{#each promoted_articles}}
        <li class="promoted-articles-item">
          <a href="{{url}}" title="{{title}}">
            {{title}}
          </a>
        </li>
        {{/each}}
      </ul>
    </section>
    {{/if}}
  </div>

Now, add the given CSS code:

.container.req-form{
  display: flex;
    flex-direction: column;
}

.req-form .section.promoted-articles {
      display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    flex: 1 0 100%;
    margin-left: 0;
  margin-top:40px;
}

.req-form .promoted-articles-item{
      width: 100%;
    flex: 1 0 100%;
}

@media(min-width:992px){
  .req-form .section.promoted-articles {
    width: 40%;
    flex: 1 0 40%;
    margin-left: 40px;
    margin-top:0;
}
  .container.req-form{
    flex-direction: row;
}
}

Hello , I copied the above snippet you provided and the below is the outcome. @ifra

I don't have this kind of issue in the Copenhagen theme. Can share your HC public URL here? so I can figure it out.

The link is https://boat-ed.zendesk.com/hc/en-us I am using the Havelock theme @ifra

Okay,

Remove your previous added CSS code (ALL) which I shared above and add the below code:

.container.req-form{
  display: flex;
    flex-direction: column;
}

.req-form .section.promoted-articles{
      display: block;
    width: 100%;
    margin-left: 0;
  margin-top:40px;
}

.req-form .promoted-articles-item{
      width: 100%;
    flex: 1 0 100%;
}

@media(min-width:992px){
  .req-form .section.promoted-articles{
    width: 40%;
    margin-left: 40px;
    margin-top:0;
}
  .container.req-form{
    flex-direction: row;
}
}

and let me know.

Thanks

You're awesome, Thank you! Looks much better now! One last thing, any way to get point form like your very first image? @ifra

Like this one:-

Bullets in the article, add the given CSS at the bottom on style.css file:

.req-form .section.promoted-articles ul {
  list-style: disc;
    padding-left: 16px;
}

Success, thank you very much for all your help!