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
-
The default page for sections has two columns - one for each of the two categories I have. I will be adding a 3rd category and would like them to show in rows - I searched around but couldn't find an answer. Thanks in advance for any help
-
Hi John,
If I'm understanding you correctly, instead of having two columns of sections in your category page, you just want one, with each section listed below the last. If that's the case, then you can achieve this pretty easily by modifying one number in your theme's style.css file -- find this bit of code:
@media (min-width: 768px) {.section-tree .section {flex: 0 0 45%;/* Two columns for tablet and desktop. Leaving 5% separation between columns */}}
and change that 45% to 100%.
and
-
@John DiGregorio, If I'm also understanding you correctly, you want three sections in a row like below:
To get this, go to your style.css file and find for classes and change the 45% to 33%: .section-tree .section
Currently (by default) you have 45% for two columns in a row:
After changing you will have 33% for three columns in a row:
If you want only single section in a row then it would be 100% for single column in a row:
Team
-
Hi, can you tell me how I would go about creating two columns in my sections page so that the subsections are in two columns? an example would be: Using Guide for help center – Zendesk help. Each subsection is placed into either column with a list of their articles underneath. Thank you.
-
Hi :),
i). Add articles underneath subsections and wrap in a div and remove SVG icon's code.
ii). Add the given CSS to your stylesheet.
.section-container .section-list,
.section-container .article-list{
display: flex;
flex-wrap: wrap;
}
.section-container .section-list div,
.section-container .article-list-item{
flex: 1 0 290px;
border: 0;
}iii). Output is -
Thanks
Please sign in to leave a comment.
27 Comments