Article Section Page - Split Articles Column into 2?
AnsweredHi guys!
I was wondering if anyone can help me figure out how to put the articles list in the sections page 2 columns? Pretty much like this: https://support.zendesk.com/hc/en-us/sections/206667367-Setting-up-Zendesk-Guide
Thanks :)
-
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
-
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
DAnd now it's:
C | A
D | BI'm hoping to get it to be:
A | C
B | DThanks :)
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!!
-
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;
}
} -
Awesome!
-
Does this go in the style.css?
-
Hi @Cesar Perez,
Yes, it goes to the style.css file at the bottom.
Thanks :)
-
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?
-
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.
-
Sure, it's helpdesk.kaseya.com, and account assumption is enabled if you need it. Thanks.
-
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
-
I replaced the code with the latest one, and still no two columns for the KB articles.
-
KB Tree article, at homepage, right?
-
Share the screenshot for which page you want to do this?
-
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.
-
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:
-
Great! That worked.
Any way to have more than 3 bullets per column?
-
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:
-
I will have a look later today.
Thanks for the help!
-
Cool !
-
Is it possible for the sections to have two columns as well?
https://helpdesk.kaseya.com/hc/en-gb/sections/4406076837265-Release-Notes
-
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 -
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
Please sign in to leave a comment.
22 Comments