Different width for columns in a dnd-template

SOLVE
Highlighted
New Contributor

Good afternoon,
when creating a dnd-template in the design manager a width attribute can be given to the element. But if I want to position two modules next to each other with different widths, this does not work. Each element takes up exactly half of the available space. Where is my mistake?

 

{% dnd_area 'dnd_area' class='body-container body-container--landing-page', label='Main' %}
          {% dnd_section 
            max_width=1506,
            vertical_alignment='MIDDLE'
          %}
            {% dnd_column
              offset=0,
              width=4
            %}
              {% dnd_row %}
                {% dnd_module path='@hubspot/linked_image' %}
                {% end_dnd_module %}
              {% end_dnd_row %}
              {% dnd_row %}
                {% dnd_module path='@hubspot/rich_text' %}
                  {% module_attribute 'html' %}
                    <h3>Feature one</h3>
                    <p>Use text and images to tell your company’s story. Explain what makes your product or service extraordinary.</p>
                  {% end_module_attribute %}
                {% end_dnd_module %}
              {% end_dnd_row %}
            {% end_dnd_column %}
            {% dnd_column
              offset=4,
              width=8
            %}
              {% dnd_row %}
                {% dnd_module path='@hubspot/linked_image' %}
                {% end_dnd_module %}
              {% end_dnd_row %}
              {% dnd_row %}
                {% dnd_module path='@hubspot/rich_text' %}
                  {% module_attribute 'html' %}
                    <h3>Feature two</h3>
                    <p>Use text and images to tell your company’s story. Explain what makes your product or service extraordinary.</p>
                  {% end_module_attribute %}
                {% end_dnd_module %}
              {% end_dnd_row %}
            {% end_dnd_column %}
          {% end_dnd_section %}
        {% end_dnd_area %}
Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Solution
Regular Advisor | Partner

@ewice your HubL looks correct from my first glance. It could be an issue with your CSS that's being used for your layout.css / row-fluid span1-12 classes. Do you have a preview link?

Stefen Phelps, Community Champion, Kelp Web Developer

View solution in original post

2 Replies 2
Highlighted
Solution
Regular Advisor | Partner

@ewice your HubL looks correct from my first glance. It could be an issue with your CSS that's being used for your layout.css / row-fluid span1-12 classes. Do you have a preview link?

Stefen Phelps, Community Champion, Kelp Web Developer

View solution in original post

Highlighted
New Contributor

I forgot to link the layout.css.

Thanks

Reply
0 Upvotes