Best Practice Layouts for Mobile?

[mtanco]

Are there any best practices for using components that will look good on both desktop and mobile? I really like how ui.section_cards look on desktop, but the components are not rendering as well on mobile. Any suggestions on change to layout or components so that it would look better on both?

Wave: 0.13.0

Code: https://github.com/mtanco/conifer-counter

Desktop:

Mobile:

[lo5]

There's no straightforward way to achieve this. The only way is to specify alternate layouts, and as far as possible give identical names to similar zones across layouts so that your box definition on each card remains simple.

[lo5]

@mturoci Maybe one improvement we could do is to make the LHS and RHS sides of the section_card wrap when space-constrained so that the RHS appears right below the LHS?

[mturoci]

Sounds good @lo5. So are you suggesting to add width lhs_width and rhs_width to the section card? Also note that this may not be enough as rhs can need its own inner wrapping (per component) as well.

[lo5]

So are you suggesting to add width lhs_width and rhs_width to the section card?

No. Simply display LHS and RHS one below the other when space-constrained.