Card not spacing correctly

[code2]

Hi,

I have had this problem before. The only way I have been able to fix it in the past is to delete and re-construct the page where the issue occurred. Copy and pasting a Card from anoth page or just deleting and rebuilding the Card does always work.

Page I construct only use Layout Grids to form the RWD basis (no Breakpoints except for those native to an object - Layout Grid, Card Container, Themeable or Responsive Menues, etc, etc. I gave up using breakpoints a while back.

I use cards now for all manner of things including a replacement for Themeable Button because text doesn't seem to wrap in the Themeable Button when it has a border and then it loock odd on at small resolutions.

So, when using Cards I usually have a Layout Grid, a Card Container and a deck of Cards. The majority of the time, the Cards will expand to the width of the screen as they should. I use Card Containers because of the Equal Height Cards option. Much neater appearance.

To the problem, I have have on occasion. Sometimes the deck of Cards do not expand to the screen width. And I do say sometimes.

Here is a test of the Card in a set the first two are in LayoutGrids and Card Containers. I have gone through all the setting and all the Cards in the three decks shown appear to have exactly the same settings. Deck 1 and 2 have the same width in design mode but when previewed locally or published to a website both behave differently.

The 1st Deck behaves like 80% of the ones I constructed. But, the 2nd Deck does not expand when

The 3rd deck, which behaves correctly, is a copy and paste for the Card Container from the 2nd Deck. Once it is outside of the Layout Grid, the 3rd deck bahaves as expected.

https://targe.com.au/beta/Test - Cards.wbs

Please, what am I missing?

Thanks in advance.

[Pablo]

Firstly, I do not recommend to use a card container inside a layout grid. These are two different layout systems. There were not designed to be nested.
It may work now, but in the future the internal structure may change and then it can stop working.

The size of the cards is different because the content of the cards is different, the smaller cards take up less space horizontally. This is how flexbox works.
Note a card container is basically a flex container with predefined/fixed flexbox settings.
If you want to have more control over the size and layout of the cards then use the flex container instead.

[code2]

OK. Lesson learnt.

So, for future reference. Anything like a Card Container, Flex Container, Flex Grid should be used independant of a Layout Grid ?

Are there any other RWD objects that shouldn't be either ?

[Pablo]

So, for future reference. Anything like a Card Container, Flex Container, Flex Grid should be used independant of a Layout Grid ?

I recommend not to nest different layout methods. For example, do not put a layout grid in a flex container and vise versa.

[code2]

Thank you, understood.