Hi Community :-)
What widget is this on the homepage or is it custom HTLM?
I can’t get the Quick Links widget to stack 4 in a row like this
Solved
What widget is this?
Best answer by DannyPancratz
UPDATE - April 10, 2024: The quick links widget has been enhanced with this funtionality and you no longer need the solution below.
Simply edit the Layout settings in customize mode.
Old answer in the spoiler below
it’s custom CSS to change the size of the quick links widget.
I asked about it awhile back and support was able to help me with this
/* start quicklinks view 4 tiles for Community Forums*/
@media (min-width: 1240px) {
.widget-container--index-6 {
justify-content: space-between;
}
.widget-container--index-6 article.quicklink-image div.quicklink__title{
padding:16px 8px;
}
.widget-container--index-6 article.quicklink-icon, article.quicklink-image{
text-align:center !important;
}
.widget-container--index-6 .quicklink__box {
grid-column: auto / span 3 !important;
}
/* end quicklinks view 4 tiles*/the index # is going to change depending on where on the page (order of widgets from top to bottom), i believe. So if you move the widget up/down after setting this up, it could break. But I’ve found hidden widgets count in the index, so I just hide/unhide to keep it working.
+7UPDATE - April 10, 2024: The quick links widget has been enhanced with this funtionality and you no longer need the solution below.
Simply edit the Layout settings in customize mode.
Old answer in the spoiler below
it’s custom CSS to change the size of the quick links widget.
I asked about it awhile back and support was able to help me with this
/* start quicklinks view 4 tiles for Community Forums*/
@media (min-width: 1240px) {
.widget-container--index-6 {
justify-content: space-between;
}
.widget-container--index-6 article.quicklink-image div.quicklink__title{
padding:16px 8px;
}
.widget-container--index-6 article.quicklink-icon, article.quicklink-image{
text-align:center !important;
}
.widget-container--index-6 .quicklink__box {
grid-column: auto / span 3 !important;
}
/* end quicklinks view 4 tiles*/the index # is going to change depending on where on the page (order of widgets from top to bottom), i believe. So if you move the widget up/down after setting this up, it could break. But I’ve found hidden widgets count in the index, so I just hide/unhide to keep it working.
+7Note 1: the quicklinks widget is built with the default to 3 in a row, so after 6 (two rows nomally, but only 1.5 with this style applied) it auto hides widgets 7+ in a view more button. And that looks weird with a row and half in this layout of 4 across.
So i don’t recommend using this style for anything more than 4 quicklinks in a widget. If you need to go to 8, add another quick link widget and apply the style again.
Note 2: This custom CSS applies to every place where quick links are used. So if you have it on a community overview page or knowledge base overview page or Ideation page or custom page…
The hide/unhide solution is helpful there too. You can have quick links widgets to satisfy the index number and hide/unhide them if you want the style to be 3 across or 4 across.
1 person likes this
+2Here is an article on how to adjust the number of quicklink in a row I wrote a while back.
Could also be of use.
The needs of the many, outweigh the needs of the few. 🖖
1 person likes this
Reply
Sign up
If you ever had a profile with us, there's no need to create another one.
Don't worry if your email address has since changed, or you can't remember your login, just let us know at community@gainsight.com and we'll help you get started from where you left.
Else, please continue with the registration below.
Welcome to the Gainsight Community
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.