CMS Development

DPrynne
Member

Resource Tables Custom CSS

SOLVE

Hi All,

 

We have a resource table (Hub DB table) displaying case studies on this page: https://www.metiscomm.com/work

 

Trying to figure out the best approach for making the card containing each of the case studies smaller on desktop. A method for how to have 4 featured on one line would be great and then a method for how to make them smaller if this isn't enough would also be very useful.

 

More experienced with WordPress so simple explanations are preferred!

 

Thanks in advance!

0 Upvotes
1 Accepted solution
Mike_Eastwood
Solution
Key Advisor | Gold Partner
Key Advisor | Gold Partner

Resource Tables Custom CSS

SOLVE

Hi @DPrynne 

 

You can add some CSS to wrangle the cards so that 4 appear on a line:

<style>
@media screen and (min-width: 1025px) {
    .resource__item {
        width: 22% !important;
    }
}
</style>

The minimum width is 1025px (assuming iPads works at 1024px in landscape) but you can play with the min-width.

 

And the width of the resources item is 22% allowing 4% gutters, again you can play with that too.

 

To add this code to the Page go to to your page Marketing (top menu) > Pages (sub menu) > edit you page. Then go to File (top menu) > Page Settings (sub menu) > Advanced (bottom left). Paste in the CSS with the Style tags exactly as above.

 

And here's how to add CSS to you main CSS file (so it works anywhere on your site).

 

Important: the main.css doesn't need Style Tags, only use the Style Tags if you add the CSS to a single page.

 

Have fun

Mike

 

Here to learn more about HubSpot and share my HubSpot Knowledge. I'm the founder of Webalite a HubSpot Partner Agency based in Wellington, New Zealand and the founder of Portal-iQ the world's first automated HubSpot Portal Audit that helps you work smarter with HubSpot.

View solution in original post

0 Upvotes
2 Replies 2
Mike_Eastwood
Solution
Key Advisor | Gold Partner
Key Advisor | Gold Partner

Resource Tables Custom CSS

SOLVE

Hi @DPrynne 

 

You can add some CSS to wrangle the cards so that 4 appear on a line:

<style>
@media screen and (min-width: 1025px) {
    .resource__item {
        width: 22% !important;
    }
}
</style>

The minimum width is 1025px (assuming iPads works at 1024px in landscape) but you can play with the min-width.

 

And the width of the resources item is 22% allowing 4% gutters, again you can play with that too.

 

To add this code to the Page go to to your page Marketing (top menu) > Pages (sub menu) > edit you page. Then go to File (top menu) > Page Settings (sub menu) > Advanced (bottom left). Paste in the CSS with the Style tags exactly as above.

 

And here's how to add CSS to you main CSS file (so it works anywhere on your site).

 

Important: the main.css doesn't need Style Tags, only use the Style Tags if you add the CSS to a single page.

 

Have fun

Mike

 

Here to learn more about HubSpot and share my HubSpot Knowledge. I'm the founder of Webalite a HubSpot Partner Agency based in Wellington, New Zealand and the founder of Portal-iQ the world's first automated HubSpot Portal Audit that helps you work smarter with HubSpot.

0 Upvotes
DPrynne
Member

Resource Tables Custom CSS

SOLVE

Worked great @Mike_Eastwood thanks very much!