Drag & Drop Editor - Multi-Column Layouts on Mobile
In the drag and drop email editor, no form of multi-column layouts are possible for mobile. Meaning, if I have a 2-column layout on desktop, it becomes 1 column x 2 rows on mobile.
This is an issue when a design depends on multi-column use, such as icons in the first column being right-aligned with corresponding left-aligned text in the second column.
Visuals are in the comments below to explain further.
Would love to see this 2-column responsivity added to the drag and drop editor, as I don't know how to custom code that, hence why I use drag and drop!
Trying to add a little dev perspective here - a 2 column layout that becomes a stacked layout on mobile is the definition of responsive, it is adapting the content to the width of the device.
If you want it to remain side-by-side, it would reduce the size of the content, making it smaller, harder to see/read, and by definition, not-responsive.
This snapshot shows the expected behavior for desktop & mobile:
Maybe you could share a design mockup explaining your use case to see if there is another way to achieve the design?
Thank you for that perspective - my apologies for the misdiagnosis of the issue. I guess my desire then is to be able to choose to use two columns on mobile if I want, and to have more freedom to adjust mobile layouts after the bulk of the design is completed. I included some screenshots below to explain a couple instances where I'm running into issues.
Also run into the issue with more simple things such as the below:
The above doesn't have much of a solution except to use a 1-column with center-aligned text that creates a staggered look, which I don't prefer.
hi @Abrimacomb the visuals definitely help, and it does make much more sense to have 2 columns on mobile for your use case.
I have to say that the email drag and drop editor does seem a lot more limiting than the WYSIWYG editor that HubSpot used to have when it comes to custom use cases like this one.
I also am running into this exact issue with putting icons next to text. Surprised there is no way to adjust the settings for mobile vs. desktop. Did you find a solution?
The other issue with using your workaround solution, is that you can't set a background to go behind all of the icons because they have to be in their own sections. I have a subtle texture background I'd like to add, but can't figure out how to add it using the workaround.
@JNFultz Glad I'm not the only one! I didn't find a solution besides "dealing with it." 🙃
So you're wanting to put a subtle texture background behind the icons to visually separate the columns more? Unfortunately I don't see a solution for that, unless you design the content as a jpeg that you can then insert to one full-width column. But then that eliminates viewers to see the text without downloading the emails images.
Having a similar issue - if any one has a solve for this (Hubspot - please make it possible to 'turn off ' mobile responsiveness in the WYSIWYG! Creates some real limitations for several use cases.
Same issue here. Have found a partial workarounds by duplicating the section and re-designing it for mobile, and then turning off the mobile-designed section on desk viewpoint, and the desk-designed section on mobile viewpoint. But now I have double the sections, which also defeats the purpose of having mobile-responsive behaviors baked in. And still can't have side-by-side elements in mobile.
I am guessing the only interrim solution is to have a dev code custom modules for my theme, but IMO that defeats the purpose of using a drag-and-drop. Might as well go back to having a custom site developed at that point. I've used a handful of different CRMs in the past and the hubspot editor is the only one in which I can't control responsive behaviors. Oh how I miss webflow.
HS—please get this on your to-do list if it isn't already. We need text & element alignment settings, column stacking behaviors, margins & padding, etc, on each section, for each viewpoint.
Adding my name to the list of @hubspot users who would LOVE a separate editor for Desktop/Mobile. Or at least a way to lock certain columns. I have all of the same issues as the above posters. Emails and landing pages look great in one place and awful in the other with mediocre workarounds at best to try and serve my customers on their various devices.
It is indeed standard functionality in lots of CRM to be able to manage which blocks are used for Mobile, and which are used for Desktop. Take a look at Microsoft Dynamics 365 Marketing for example. Dynamics Marketing itself is quite terrible, but at least they had this functionality which is just necessary.
very strange and bad that this is not possible with Hubspot...
