Changed to stacked layout for smaller screens


#1

I was watching some youtube vids and it shows that the cards should stack when the screen is resized down to mobile width however mine is just squishing down till they start overlapping. I’ve tried in Chrome and IE but both the same.

Currently, I just have the below, 4 cards inside a new UDLayout

New-UDLayout -Columns 4 {
New-UDCard
New-UDCard
New-UDCard
New-UDCard
}
layout


#2

You currently can’t do that with New-UDLayout but you could that with New-UDRow and New-UDColumn directly.

New-UDRow -Columns {
    New-UDColumn -SmallSize 12 -MediumSize 6 -LargeSize 3 -Content { New-UDCard }
    New-UDColumn -SmallSize 12 -MediumSize 6 -LargeSize 3 -Content { New-UDCard }
    New-UDColumn -SmallSize 12 -MediumSize 6 -LargeSize 3 -Content { New-UDCard }
    New-UDColumn -SmallSize 12 -MediumSize 6 -LargeSize 3 -Content { New-UDCard }
}

I added an issue for this because New-UDLayout should do this automatically: https://github.com/ironmansoftware/universal-dashboard/issues/687


#3

So its not something i’m doing wrong but instead something with UD?


#4

Yep. I will get this fixed in the next build.

If you want to use New-UDRow and New-UDColumn in the mean time it will work.