Hide a container and it's contents in mobile view

Support
1

How do I hide a container (and all it’s contents) in the mobile view? Our business requirement is nt to display certain information in the mobile view.

2

Hi Piyush! Here are the steps to hide a container on mobile.

  1. Set the container’s width to “FIt”
  2. Then, click the mobile button at the top right to apply mobile styles
  3. Then, for each contents/elements within that container, turn off visibility using Visibility toggle (the eye icon) in the Style bar on the right

Then, you’ll see the container hidden on mobile! (since the width is set to fit the elements, and since all the elements were hidden on mobile, it hides the container).

I recorded a quick demo on how to do this here as well: Loom | Free Screen & Video Recording Software | Loom

Please let me know if you have any questions!

3

Thank you Zack. However, nested containers - even if the width is set to Fit, breaks this behavior. It was very painful to redo the form (simple as it was) and remove every nested container. I had an image in a container so that I could make it clickable; I had to make that a button and load the image in the button to make it clickable and get rid of the nested container.

It would be nice if nested containers were handled in the solution you posted.

4

Hi Piyush, you can remove nested containers by using the ungroup elements action, which will remove the selected container but retain its child elements.

5

@peter That’s what I did - thank you for the tip.

However, containers are useful in the course of designing the form - and then to have to remove them so that part of the form can be hidden in a mobile view was very difficult.

One of the issue I ran into was having an image field side by side with a text field. I could not find a way of doing this other then having the two in their own containers. The moment I removed the containers, the text field would not appear next to the image field. It would appear below the image field. I had to play around with the margins of both the image field and the text field to get the appearance of the text field next to the image field.

6

I think you’re looking for the Rotate into Columns/Rows control on the container, which will switch the axis of the container between rows and columns as you desire.