full_width not working on dnd_section

Developer Support CMS Development
1

Hi all.

I’m creating a drag and drop page and I can’t seem to get a section to be Center Content (see screenshot) by default rather than Full Width. I assume I use the boolean full_width=false but it is not working? Any help will be much appreciated. (I’ve got a feeling I’m missing something super simple here!) Code below:

Screenshot 2022-06-07 at 09.05.46.png
Screenshot 2022-06-07 at 09.05.46.png750×426 32 KB

{% dnd_section
 vertical_alignment='MIDDLE',
 full_width=false
 %}
 {% dnd_module path='@hubspot/rich_text',
 offset=0,
 width=6,
 %}
 {% module_attribute 'html' %}
 <h2>Heading</h2>
 {% end_module_attribute %}
 {% end_dnd_module %}
 {% dnd_module path='@hubspot/form'
 offset=6,
 width=6, 

 %}
 {% end_dnd_module %}

 {% end_dnd_section %}
2

@webdew @Oezcan do you have any insight for @sonicfroots?

Thank you! — Jaycee

3

Hi there!

It seems we need to define a max_width along with the full_width parameter as well.

Here is the code that worked for me, setting the maximum content width to 300px:

 {% dnd_section
 vertical_alignment='MIDDLE',
 full_width=false,
 max_width=300
 %}
 {% dnd_module path='@hubspot/rich_text',
 offset=0,
 width=6,
 %}
 {% module_attribute 'html' %}
 <h2>Heading</h2>
 {% end_module_attribute %}
 {% end_dnd_module %}
 {% dnd_module path='@hubspot/form'
 offset=6,
 width=6, 

 %}
 {% end_dnd_module %}

 {% end_dnd_section %}

Let me know if making this change works on your end!

Slight edit: I tested this without ‘full_width=false’ and just specifying the max_width and find that it automatically sets the section to be Center Content

Best,
Antonin