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; } } }

Resize image card in a row

Ed_

I have a bunch of `image cards` in a `row` card, however I am unable to all of them have the same size. The `Scale Image to Fill` option does not work either. Like no matter what I am unable to have the last two image cards have the same size as the rest of the image cards.

How can I fix this?

Encontre mais publicações marcadas com

Accepted answers

All comments

AmyHox

Glad I found this thread! Thanks for your suggestion as well Paul. This is my first Hub that I've created so I'm just figuring things out. I have 8 sites that I am trying to link to and was originally using an Image that I was going to link a page to but I was having the same issue as you Ed, the image cards were all different sizes. When I used the Gallery card I was able to specify how many cards I want per row, using the Manual option and then going to Select Content and selecting Sites and Pages under the Collection group on the left side. So I'm still able to directly link to my Sites but have the images be the same size on the rows throughout. ALSO for anyone that is really confused about how to update the thumbnail so that the logo on the Gallery card is updated, it's not in the Hub Site itself, you have to go back to your AGOL user page and update THAT thumbnail associate with the Hub Page that was created in AGOL when you created the page in Hub... I just spent way too much time trying to figure that out 😅

Ed_

Good day Klara,

I am glad to know that it's under consideration. Speaking of HTML, I am not super familiar to it so, can you please provide a sample code that I can try to modify for my use case?

KlaraSchmitt

@Ed_

Yes, I understand it's not ideal. However, until we redo our grid structure, which is a large-scale effort that is in fact on our radar, we're limited in how we can handle card resizing and the total columns used by cards in a row must equal 12. And yes, if you do not wish to write HTML to achieve your desired affect in a single 12-column Text Card, I would advise the use of more spacers.

Ed_

Hi Klara, thank you for the quick response. However, this is not an ideal solution as you can see below that the image cards don't have the same size in both rows. Now, I know I can fix that by adding more spacers in the second row but, that's like a quick hack fix.

An ideal solution would be to have the ability to resize the image card just like in Adobe and/or Experience Builder.

Ed_

Thank you for suggesting that.

Ed_

Hi Mark, thank you for the quick response. I didn't use any code as I dragged the image cards to the row.

PaulTHEDUDELang

I also spent many hours trying to format images but with Bootstrap 3 within HUB just not happening. Went with the Gallery Card for the best overall results. I do hear Bootstrap 4 may have flex grids

KlaraSchmitt

Hello @Ed_,

You are likely running into issues because you have 7 images and Hub uses a 12-column grid system to define our rows. At the moment you have 5 image cards that are each 2-columns wide (utilizing 10 columns) and that leaves you with only 2 spare columns of space, so each one of your remaining image cards can only be 1-column wide. You may want to consider stacking your images in two rows and adding spacers on either side.

Mark_Hébert

Hey Saadullah - can you share the config or code that is applied?

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Entrar
Registrar

Links Rápidos

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