22 Kommentare

  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hey, you can use this code just need to copy and paste it, I tried it on Copenhagen Theme so you need to pay attention to the class name if your template has any different classes.

    .section-content .article-list{
    display: flex;
    flex-wrap: wrap;
    }
    @media (min-width:768px){
    .section-content .article-list-item{
    width: 50%;
    padding: 0 20px 0 0;
    }
    [dir="rtl"] .section-content .article-list-item{
    padding: 0 0 0 20px;
    }
    }

     

    Team

    0
  • joeybeans

    Hi! Omg, thank you so much, that's helped! You're amazing!

    I'm so sorry, do you think you can help with 1 more thing? It's split it into the 2 columns, but I want them possibly stacked the other way:

    e.g. it used to be:

    A
    B
    C
    D

    And now it's:

    C | A
    D | B

    I'm hoping to get it to be:

    A | C
    B | D

    Thanks :)

    EDIT: I think I got it going by adding "flex-direction: row-reverse;" here:

    .section-content .article-list{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;

    Thank you so much again though!!

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Okay, you want to reverse the columns.

    Remove previous code and copy-paste this code:

    .section-content .article-list{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse; //only added this property
    }
    @media (min-width:768px){
    .section-content .article-list-item{
    width: 50%;
    padding: 0 20px 0 0;
    }
    [dir="rtl"] .section-content .article-list-item{
    padding: 0 0 0 20px;
    }
    }
    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Awesome! 

    0
  • Cesar Perez

    Does this go in the style.css? 

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hi @Cesar Perez, 

    Yes, it goes to the style.css file at the bottom.

     

    Thanks :)

    0
  • Cesar Perez

    Thanks - So I did add it, but the articles are still showing up as one column, and not two. Anything else we can try or do? 

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Okay, you can share your HELP CENTRE public URL here, I'll figure out what's the issue?

    May be it's because different class-name.

     

    0
  • Cesar Perez

    Sure, it's helpdesk.kaseya.com, and account assumption is enabled if you need it. Thanks.

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Add the below CSS code into style.css file and check the section page list:

    .section-page .article-list {
    display: flex;
    flex-wrap:wrap
    }

    .section-page .article-list-item{
    flex: 1 0 100%;
    }

    @media (min-width:768px){
    .section-page .article-list-item{
    flex: 1 0 45%;
    margin-right:30px;
    }
    }

     

    and let me know if it solve your issue.

     

    Thanks

     

    0
  • Cesar Perez

    I replaced the code with the latest one, and still no two columns for the KB articles. 

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    KB Tree article, at homepage, right?

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Share the screenshot for which page you want to do this?

    0
  • Cesar Perez

    Ah, so here is what we would like to have two columns:

    https://helpdesk.kaseya.com/hc/en-gb/categories/204079068

    For each category page.

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hi, replace the code , add this new snippet:

    .category-page .section-tree .article-list{
    display: flex;
    flex-wrap:wrap
    }

    .category-page .article-list-item{
    flex: 1 0 100%;
    }

    @media (min-width:768px){
    .category-page .article-list-item{
    flex: 1 0 45%;
    margin-right:30px;
    }
    }

    Output is:

     

    0
  • Cesar Perez

    Great! That worked.

    Any way to have more than 3 bullets per column? 

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    It's default functionality by Zendesk, when your sections have more than 6 articles it would be display a link 'See all XYZ articles'.

     

    You can try this one solution for your requirement:

    https://support.zendesk.com/hc/en-us/community/posts/4407376197274-Guide-Category-page-with-conditionally-expandable-section-lists

     

    0
  • Cesar Perez

    I will have a look later today.

    Thanks for the help!

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Cool !

    0
  • Cesar Perez

    Is it possible for the sections to have two columns as well? 

    https://helpdesk.kaseya.com/hc/en-gb/sections/4406076837265-Release-Notes

    0
  • Ana Souza

    Hi Cesar,

    I will be opening a ticket for your questions, and we will continue the support via the ticket.

    Regards, Ana

    Ana S.
    Technical Support Specialist at Zendesk | EMEA

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hi Cesar, use this code for the section, only copy and paste it at the bottom area on stylesheet.

     

    .section-page .article-list {
    display: flex;
    flex-wrap:wrap
    }

    .section-page .article-list-item{
    flex: 1 0 100%;
    }

    @media (min-width:768px){
    .section-page .article-list-item{
    flex: 1 0 45%;
    margin-right:30px;
    }
    }

     

    Screenshot after adding the above code

     

    0

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.

Powered by Zendesk