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?

[Mark_Hébert]

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

[Ed_]

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

[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.

[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.

[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_]

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?

[Ed_]

Good morning @KlaraSchmitt, hope all is well, any update on the requested sample HTML code?

Thank you

[KlaraSchmitt]

Hello @Ed_,

Unfortunately, you would need to do something fairly complex to make seven images look good in a 12-column grid and you would likely need to have a sound understanding of css-grid, flex-box and/or media queries. I don't have much experience with css-grid and while I did try a quick implementation of your premise using flexbox on my own site, it did not look good when content was forced to wrap on smaller devices. Flexbox doesn't do wrapping automatically and I think even if I did provide you with baseline code, you wouldn't like the output. As you've stated that you aren't familiar with editing HTML, I think you would find it difficult to modify and I think you will have a better look if you use spacers. You may also try searching this forum for people who've done similar grid implementations and see if there's anything you want to try out.

[Ed_]

No worries @KlaraSchmitt, I would actually greatly appreciate an ESRI instructor lead course on how to use HTML/CSS and similar coding techniques in Hub.

Cheers