Adjust Row Layout Options for 5 column ‘Row Layout Block’

[Anonymous 125270]

Anonymous 125270

September 18, 2021 at 9:01 am

The issue is with the Row Layout block, when there are 5 columns. Under mobile layout options, the only two pre-selected ones are squeezing them all horizontally or stacking vertically. Neither apply to what I need.

The goal: on mobile only, the 5 columns in my “Rating Box” wrap within a 3 column grid. (Thus one row of the first three columns, a second row of the last two – ideally centred)

The old solution, a carryover from Elementor, was to duplicate the element, adjust the layout for mobile, and then tweak the visibility settings to only show that adjusted element on Mobile screens (while still loading the hidden element). That’s how it currently is on the staging site.

BUT I’m trying to simplify and clean up everything so it works with just one hooked element, not double. Plenty of sources, including a few other threads on here, note that such a layout option is possible – except I cannot get it work. (I’ve tried tweaking the # columns and rows, trying the horizontal vs vertical section layout, and more) Heck, Ben was able to help tweak the mobile layout in my footer as well – but I couldn’t even get that solution to apply here. I’m probably missing something obvious, or the options I’ve tried are being overrun by higher css styling.

Here’s a page where the troublesome Row Layout is visible: *Login to see link

Note: the issue specifically pertains to mobile screens <768px, and that I currently have set BOTH blocks to show on mobile. They should look the same in the end.

Thanks