Target an DnD section with CSS. Element stacking order on mobile.

Develop, Build & Integrate CMS Development
, ,
1

It’s as simple as it sounds. As a developer, our job is to make content editors have the ability to edit as easily as possible.

Picture this: A client makes a 2-column layout with the DnD editor. Text on the left, picture on the right.

They ask: “On mobile, I want it to stack so the picture is up top and the text is underneath.”

How many times have you heard that?

OK… so what’s Hubspot’s suggestion?

If this was Wordpress, I could easily give the section an identifier, whether a unique ID or css class, and then target it with CSS to reverse order at a certain breakpoint. That would work great because there are going to be multiple instances where the content editor is going to want that. Heck, I could even give the core block in Wordpress a custom style option where the editor could tick a checkbox and it would do it every time.

In Hubspot, there’s no such option. On the mobile breakpoint, I can adjust margins, padding, visibility… these are all great options that actually surprass Wordpress’ ability.

But how do you suggest I accomplish the very, very, very common task of ordering elements on mobile?

Because when Hubspot outputs DnD elements, the IDs change. So I can’t target them with CSS.

And sure, I could say:

.row-fluid-wrapper.row-depth-1.row-number-32.dnd-section > .row-fluid {
 flex-flow:column-reverse;
}

but then I have to say to my content editor: “Don’t ever change the content, or content order, because it will stop working!”

So what? I write Javascript to target the content, traverse up the DOM to the parent and then flip the order after I measure the screen width? No thanks. And it still doesn’t allow the content editor to freely update content without risk.

Maybe this? I provide multiple of the same elements in different orders, and hide/show them based on the breakpoint? Does that sound good for SEO and accessibility?

As it stands, there is no ideal solution. It’s not available in the editor, there’s no failsafe longterm way to provide a fix for an editor to get their desired results. And that’s what content editors want.

Provide something that works.

2

Hi @squatchcreative,

you’re totally right. It’s currently not that easy as in other CMS but here some ideas:

  1. Create a (saved) section template with a custom class
  2. Create a “row-module”. This is quite an old technique from a time when themes were’n a thing but it still might come in handy from time to time. Especially in such cases as you describe. The main idea is to create a module which will have the functionality of one, two, several columns with a predefined layout and possible elements. Depending on your requirements it might be quite a lot work compared to “just dnd modules” but you’ll have a LOT more control over every aspect. And limit the user in options (which isn’t a bad thing if you’re looking for ease-of-use and usability)
  3. You could duplicate the dnd row, change the order of the content and hide it on desktop/mobile

best,

Anton

3

I usually handle things like this by creating separate sections for desktop and mobile, with the modules arranged differently.

You could probably make an “Order Switcher” module that doesn’t display anything but targets the parent section div and rearranges the child divs as needed, but it’s probably not worth that much hassle.

4

I have encountered this problem probably 30 times since I wrote this post. Here is how I solved it…

I made a module called “Mobile Swap” and placed it within any of the multi column layouts I want to see swapped in order on mobile when they stack. The module had this as the HTML:

<mobile-swap></mobile-swap>

In the theme’s javascript, I added this jQuery snippet (you need jQuery):

$('mobile-swap').each(function() {
 var $dndSection = $(this).closest('div.dnd-section.row-fluid-wrapper');

 if ($dndSection.length > 0) {
 $dndSection.children('div.row-fluid').addClass('mobile-reverse');
 }
});

This essentially detects where the module is, traverses up the DOM to the section container and adds a class to the row directly beneath it that contains the columns.

Depending on your mobile breakpoint for when elements stack, I added this CSS:

 all and (max-width:1080px) {
 .dnd-section .row-fluid.mobile-reverse {
 flex-flow: column-reverse;
 }
}

This will stack the columns and re-order them from last to first. In most cases, it’s a 50/50 column where the text is on the left, the image is on the right, and you need them to flip on mobile so the image is up top and the text is below.

This gives content editors the ability to add this wherever they are making content and determine when/where they would like it to happen.

Hope this helps!

5

aaaaaaand sometimes Hubspot will wrap columns in an additional row element. Sometimes they do not. It depends on how many modules you have in section and how they are ordered. This is my updated CSS to cover all scenarios:

.dnd-section .row-fluid.mobile-reverse {
 flex-flow: column-reverse;
}

.dnd-section .row-fluid.mobile-reverse .dnd-row > .row-fluid {
 flex-flow: column-reverse;
}

.row-fluid.mobile-reverse:before, 
.row-fluid.mobile-reverse:after,
.row-fluid.mobile-reverse .row-fluid:before, 
.row-fluid.mobile-reverse .row-fluid:after {
 display:none; 
}