Responsive layout inside a grid

Use this board to ask questions or have discussions with other Rich Displays users.
Post Reply
kswisher
Profound User
Posts: 27
Joined: Fri Oct 23, 2015 9:51 am
First Name: Ken
Last Name: Swisher
Company Name: MHC
Contact:

Responsive layout inside a grid

Post by kswisher »

Is a responsive layout inside of a grid row possible?

I attempted to add it, and it seems like the layout just sets on top of the grid as a whole rather than in a specific row.

I was hoping to setup a grid that behaves as normal in full screen, stack some items in tablet, and stack even more for mobile.

For example:
FullScreen:
Col1 | Col2 | Col3 | Col4 | Col5 | Button1 | Button2

Tablet:
Col1 | Col2 | Col3 | Button1
Col4 | Col5 | Button2

Mobile:
Col1 | Col2 | Col3
Button1 | Button2
Scott Klement
Experienced User
Posts: 2711
Joined: Wed Aug 01, 2012 8:58 am
First Name: Scott
Last Name: Klement
Company Name: Profound Logic
City: Milwaukee
State / Province: Wisconsin

Re: Responsive layout inside a grid

Post by Scott Klement »

No, you can't put layouts (any of them) inside of a grid row, sorry.
ekidhardt
Profound User
Posts: 25
Joined: Mon Jul 03, 2017 1:35 pm
First Name: Ed
Last Name: Kidhardt
Company Name: Conestoga Wood
City: East Earl
State / Province: Pennsylvania
Country: United States
Contact:

Re: Responsive layout inside a grid

Post by ekidhardt »

Hey Scott -

Any chance this could be coming in a new release? Sounds like it would be a great feature.
DavidBal
Profound User
Posts: 24
Joined: Fri Apr 13, 2018 4:06 am
First Name: David
Last Name: Baltromei
Company Name: H. Gautzsch Firmengruppe
Country: Germany
Contact:

Re: Responsive layout inside a grid

Post by DavidBal »

Hi,

the easiest way to make a subfile responsive is to set the overflow-x property of the layout, where the subfile is inside, to "auto".
https://www.w3schools.com/howto/howto_c ... onsive.asp

To do something like you want I would use the EJS templating inside of an html container.
http://www.profoundlogic.com/docs/displ ... Templating
In the html container you are able to create every html you want.

https://codepen.io/AllThingsSmitty/pen/MyqmdM
https://codepen.io/hectorguo/pen/BoZEyW
https://www.fourkitchens.com/blog/artic ... s-flexbox/

There are many more examples on the web.

Regards

David
Post Reply

Who is online

Users browsing this forum: No registered users and 12 guests