How to best create two columns with dynamic content on Desktop and then reorder content to 1 column on mobile?

[_nate]

Hi Wix Community,

I’m using Wix Studio to create a webpage with 2 columns of dynamic content on Desktop, and one column of dynamic content on Mobile. On mobile, I need to re-order the content to make it work in a single column The dynamics content is mostly text such as biography and will be variable length depending on the user. There are about 12 unique sections.

For my desktop layout, I’d like two parallel columns with 8 boxes on left and 4 on right

Depending on the size of the text for each box, the box should resize to fit the size of the text, then push the other boxes below it down the page. On desktop, I need each column to behave independently, such that long text in 1 column should have now impact on the other column, and vice-a-versa.

how would you suggest I do this layout in Wix studio?

I’ve tried the following WITHOUT success:

• two parallel Stacks. Works great on desktop, though on mobile I need to merge this into 1 stack which doesn’t seem supported Wix seems to have a limitation that undoing a stack on mobile, also removes that stack from all breakpoints
• flexbox. Also perfect on desktop, though I’m unable to move the content between flex boxes on mobile
• Advanced CSS - definitely more control, though changes to the left column impact the right column as the text expands and pushes down the entire horizontal CSS row

Please help!

[themusingsofmaars]

There’s going to be many ways to tackle this sort of thing but my personal initial thoughts would be use more containers and less stacks, or containers and stacks together.

I would create a section, split it horizontally (make sure you’re using the Advanced sizing of course) on Desktop and vertically for Mobile, (probably vertically for tablet too since it sounds like there will be potential for a lot of content in them to squeeze into columns with limited space), and then create 2 additional empty see-through containers, just empty boxes, 1 for each of the section column partitions. Once you’ve placed the containers into the columns make sure you set the height of the overall section and importantly the height of the split columns to Auto so they’ll wrap to the height of your container boxes and leave no empty space (There’s a few important details about this at the bottom of the post in italics). Also you probably want to set the containers to be 100% width of the columns and check they are docked into their rightful columns (and rows in mobile) and not spilling across which sometimes happens.

Then split those new containers vertically into however many parts you want and attach 1 page element (text etc) per section of the split container and then set the container segments AND the container total heights to Auto so they will also wrap with the dynamic content and leave no empty space. You can set a margin between the text and container segment if you want a little space to separate your pieces of content just like you would with stacks.

Then set the 2 master containers to be anchored/aligned to the tops of your split section, that way if the desktop content on left or right is more full or emptier than the other they’ll still both stick to the top of your section and not float in empty space within your section columns, also because the container segments are all set to auto height they will vertically squish up or grow depending on the dynamic content without effecting anything else.

The only extra step in Wix Studio is that even when you set an element to Auto height it doesn’t actually shrink as it should (this works properly as it should in Editor X, weird how broken it is in Wix Studio currently). Unfortunately you will have to manually use the blue handle at the bottom of your sections and containers and just pull them up as far as possible right over your content to the top of the page and let go so it snaps to the smallest amount of space available. Then it’ll be wrapped tightly to the text, although you may have to then adjust any margins between your content and containers again so this step should come early in your process. You’ll get used to it the more you play with it and hopefully they’ll fix this weird issue soon as it is REALLY annoying and defeats the purpose of Auto sizing entirely, grr!

But what you’ll be left with is sections that grow and shrink depending on the dynamic content available, always dock to the top so there’s no empty space above the content and with columns that interfere with each other as little as possible if there is a disparity in the different column contents.

Also, you can still use text stacks, here’s how I imagine your content could look first without stacking and 2nd with stacks with … representing the container sections:

Unstacked version:
… … … …
Name:
… … … …
(dynamic name data)
… … … …
Occupation:
… … … …
(dynamic occupation data)
… … … …

Stacked Version:
… … … …
Name:
(dynamic name data)
… … … …
Occupation:
(dynamic occupation data)
… … … …

Hopefully this makes sense, if not I can make up a little test page to demonstrate roughly how it’d look if you want!

[_nate]

Thank you themmusingsofmars!! I really appreciate the thoughtful response. Super helpful. I think I see exactly where you are going.

However, the problem is that I need to be able to change the order of the content when I go from 2 columns on desktop to 1 column on mobile. See screen shot where the order gets re-arranged such that the order makes sense to the user.

From what I’ve seen, I can not move elements between Wix boxes for the Mobile breakpoint. Moving an element requires that I move that element for ALL breakpoints. So when I go with your approach, it works beatufully if I want to show all of column1, then all of column2. Though it doesn’t work when I need to mix column1 and column2 data. Am I missing something?

Thank you again, you rock!

Nate

[themusingsofmaars]

Ah, thank you!
I totally see the whole issue now… that is more complex! Someone else might know exactly what to do there but to avoid extra hassle I’d probably go the long way around and design the desktop view exactly how you want it and then duplicate the whole section so you have 2 exact copies of the entire section, then go into your other views and hide your original section from that view. Then you can organise the layout of your copied version exactly how you want it as the vertical Mobile style. Depending on how much effort this is you might end up preferring to just create it again from scratch rather than adjusting a copy, it may be too annoying to convert it all for the new layout… either way, once you’ve got the new vertical mobile style section all set and connected go back to your desktop view and hide the new mobile version from that breakpoint so only the correct section will be displayed in each view.

It’s a bit of a cop out honestly and if you ever update the page you’ll have to do it for both versions annoyingly, but sometimes it’s less of a headache to do a little bit of work twice in cases like this. It’s not a great solution but might be worth a go, even just until a better solution comes along?

I’ll also add this just in case, ignore this whole bit if you already know about hiding and showing stuff on different views, but just in case:
To hide any element from a specific breakpoint you can select it in the editor and in the additional … options you’ll find the “Don’t Display” option, if you want to get something you’ve hidden back open the left hand Layers panel and your hidden element will display an eye with a line through it and you can just click that icon to show it again. Also you can use the same options there in the layers panel to hide stuff too, it’s just a more text based less visual way of doing the same thing!

[_nate]

Thanks themusingsofmaars! That’s what I was afraid of. I can definitely go that route, though definitely makes keeping track of all the changes challenging. I’m almost wondering if it would be better to redirect mobile users to a completely separate page. Again, same problem as keeping track of both versions and in sync.

anyway, I’ll keep looking. If you get any other inspiration, please share.

Thanks

[themusingsofmaars]

I feel like we should be so close to a solution, perhaps a slightly convoluted variation of my first idea but I can’t quite visualise how it’d work without the editor open in front of me to experiment with, it feels just slightly out of grasp, lol, but if I can figure it out over the weekend or even a better alternative than the copy/paste or unique page for each as you mentioned I’ll let you know! I’m sure we can work something out!

[_nate]

Hi themusingsofmars, I think you were on to something with your first proposal. I’m going to try that approach, though with this modification:

• create a section, then split into two columns. Use Advanced CSS for each column to make sure it scales as the text scales.
  -here’s the the trick, that I don’t like, though might be the best I’ve got. I’m going to create a limited section such that there are only a couple elements in each section. That way, when I go to mobile view, I can change the view from horizontal sections to vertical.
• then I’ll repeat above for the next section, picking the next couple items from each column and putting them together.

I think it’s going to create some funky spaces between sections when one column is longer than the others, though I think I can overcome based on the items that I group.

so anyway, I think this is a big limitation of WIX, though maybe the best I’ve got for now