Blog, Website & Page Publishing

ROverson
Member

HUBDB Results Page Layout

Hi - I'm trying to build out a page that presents the current vendors which we have available.
It's been built on top of a HUBDB which then uses filters to help the end-user find which solution they need.
I've been able to separate the solutions into singular cards but the card layout comes out unequal and sometimes the odd one will drop down to the row below leaving it not looking great.
Like this: 
Screen Shot 2021-04-08 at 22.37.00.png

Rather than a consistent 4x4 all the way down.

 

https://www.erpresearch.com/en-us/compare-erp-software-vendors - is the page.

 

I'm using the following CSS:

/* Make the container wrapper 100% */
.kl-card-grid__card-wrapper {
width:100% !important;
display:block !important;
padding:0px !important;
margin: 0px !important;
}

body {
width:100% !important;
}

/* Set each post item as % of 100% */
.kl-card-grid__card-wrapper .kl-card-grid__card{
margin-left: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-top: 10px;
width: 22.5%;
float: left;
padding: 0px;
}

/* When below 676px, make post items 100% of 100% */
@media (max-width: 676px){
.kl-card-grid__card-wrapper .kl-card-grid__card {
width:100% !important;
padding:0 12px !important;
}
}

 

Any help would be greatly appreciated.

Thanks,

0 Upvotes
2 Replies 2
ROverson
Member

HUBDB Results Page Layout

EDIT: This was rectified and is now closed

sharonlicari
Community Manager
Community Manager

HUBDB Results Page Layout

Hey @ROverson 

 

I'm glad you were able to resolve this. Would you mind sharing how you resolved it?

 

Thanks

Sharon 


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !