nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How to Configure cards positions in the Gallery Widget in ArcGIS Hub

AndrewCastilloTBSL

Hello Everyone,

I have 6 apps I want to display on my hub site gallery but every time I publish it keeps looking like 4 small cards at the top and two big cards at the bottom.

How do I get it to display it as 3 small cards at the top and 3 small cards at the bottom?

Find more posts tagged with

Accepted answers

KlaraSchmitt

Hello @AndrewCastilloTBSL,

Hub uses the 12 column grid from Bootstrap 3, so the the top row of cards is distributed evenly across 12 columns by making each card 3-columns wide. With our Gallery Card, you can have a max of 4 cards per row. So in the second row, where you only have 2 cards, they are being stretched to 6-columns wide. If you want to have 3 cards in the top row and 3 cards in the bottom row, I'd recommend adding a 1-column spacer to the left side of the Gallery. (You will need to downsize it to 1-column.) But that will prevent the Gallery Card from trying to put 4 cards in the top row.

All comments

KlaraSchmitt

AndrewCastilloTBSL

I see, thank you that helps.

Mark_Hébert

We had some interns work on our new Hub display coding in Text widgets to display 5-across, thus:

You can see the result here: https://www.coralgables.com/smartcity.

TelmaFernandes2

@Mark_Hébert can you share the code?

Mark_Hébert

This the snippet for the first card in a row of 5:

<div class="grid-container" style="grid-template-columns:repeat(5,1fr);"> 
<div class="column-24" style="display:flex;flex-wrap:wrap;grid-gap:10px;justify-content:center;"> 


<a href="https://link to resource" class="card-link" target="_blank">
<div class="card" style="width: 13rem;">
<div class="card-content">
<img class="card-img-top" src="https://image.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">City Financial Revenues</h5>
<p class="card-text"> </p>
</div>
<div class="card-body">
</div>
</div>
</div>
</a>

Just keep adding card - and keep track of your 5/row using the comments    ..  etc.

Let us know how it goes! Good luck.

Mark

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.