I am using a Column element (within a Container within a Section). The column element is set up with 6 columns, and I have set it up to adjust to 3 columns (2 rows of 3), then 2 columns (3 rows of 2), then 1 column (6 items stacked). However, only my desktop and mobile-portrait views are working properly. For the tablet and mobile-landscape views the wrapping is wonky. I cannot figure out why.
Desktop=OK
Hi I can’t figure if this is a bug, but I see what is does to your element.
When someone of myself has a bug with the ROW element, I always try the same thing: I remove all properties given to the Columns elements and add a div inside, to wrap all the columns content. Here, it didn’t solve the issue, but as soon as I gave it a height, it fixed the problem. 60px was ok. I tried removing all the divs and apply the height to the column, and it works too. It looks like columns are just interpreted as boxes and they wrap as soon as they have the room to.
That said, with experience, I recommend not giving any property to columns. not even a border. Put a div inside as soon as you create a ROW element.
Yes, you are right. Adding a value to height (instead of ‘auto’) took care of the issue. I will further put the divs inside the row elements (and instead add the necessary properties to the divs), as you suggested since it sounds like a best practice that may prevent other issues down the road. Really appreciate you taking the time to help me out, as this one had me quite perplexed. Thanks so much @vincent !
