Columns N Rows Question
KBS
Hi,
I need an advise or guide frm the master here..
i have 13 clients logo which i will display to my website using two rows..
1st row contain 7 clients logo or image (using clients addon or image layout addon) 2st row contain 6 clients logo or image (using clients addon or image layout addon)
and i need to make sure all the 13 logo same in width n height.
tq so much 4 ur help.
Mehtaz Afsana Borsha
Accepted AnswerThanks Pavel for sharing the solution.
Hi KBS
You can now close this post by accepting the answer.
Mehtaz Afsana Borsha
Accepted AnswerHi
Thanks for contacting us. Could you please give me a screenshot of your issue?
-Regards.
KBS
Accepted Answerhi tq for reply..
now i need to make it 2 rows & 7 column.... if possible using image layout element..
Pavel
Accepted AnswerHi.
Add image addons in the section whitout deviding the section to multi columns.
Set margin-botom to 0px in each image addon settings.
Add clients-grid class name in column settings.
Use following CSS
.clients-grid .sppb-column-addons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 10px;
}You wil get such layout on screens > 1400 px width.
On screens < 1400 px width images will be automatically transferred to a new row
If you use SPPB 4 (that I do not recommend) - everything is similar there
Pavel
Accepted AnswerIf you do not want that images will be automatically transferred to a new row on screens < 1400 px width use this code
.clients-grid .sppb-column-addons {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 10px;
}KBS
Accepted Answerwhere to put tis ? :-
.clients-grid .sppb-column-addons { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
columns or images?
Pavel
Accepted AnswerPut it to Helix Ultimate custom.css file