dnd_column left margin

SOLVE
CSarzana
Participant | Diamond Partner

Hi everybody,

I'm struggling in find a way to set left and right margin in {% dnd_column %}.

When I try to set a different left margin, I got this error:

Schermata 2021-07-12 alle 10.00.00.png

Is there something I can do?
Thanks,
Camilla

0 Upvotes
1 Accepted solution
webdew
Solution
Guide | Diamond Partner

@CSarzana

Yes, the dnd column shows the default margin for that you can add the margin 0 with the section area class reference.

Hope this helps!


If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards. 

View solution in original post

9 Replies 9
CSarzana
Participant | Diamond Partner

Hi @webdew ,

so I noticed that dnd_column has a default left-margin set.

The only way to remove this margin and set it to 0 is work with css class, correct?
And can you confirm I can add class only on section?

Thanks,
Camilla

 

0 Upvotes
webdew
Solution
Guide | Diamond Partner

@CSarzana

Yes, the dnd column shows the default margin for that you can add the margin 0 with the section area class reference.

Hope this helps!


If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards. 

CSarzana
Participant | Diamond Partner

Hi @webdew ,

thanks for your answer.

I'm able to set top and bottom margin as you suggested.
My problem is that I need to set left and right margin and it seems to be impossible...

 

As you can see from my screenshot I got an error, it seems that these declarations are ignored by something/code.

 

Can someone help me?
Thanks,
Camilla

0 Upvotes
webdew
Guide | Diamond Partner

Hi @CSarzana,

Yes, in dnd you can not able to add the left-right margin. You can add the padding to the dnd section if you want spacing or you can use the max_width=1200 if you want specific section alignment.

Hope this helps!


If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards. 

0 Upvotes
webdew
Guide | Diamond Partner

Hi @CSarzana ,

You can add the margin in the dnd section. Please refer this code.

Example :-{% dnd_section
  background_image={
    'backgroundPosition': 'MIDDLE_CENTER',
    'backgroundSize': 'cover',
    'imageUrl': 'https://example.com/path/to/image.jpg'
  },
  margin={
    'top': 32,
    'bottom': 32
  },
  padding={
    'top': '1em',
    'bottom': '1em',
    'left': '1em',
    'right': '1em'
  },
  max_width=1200,
  vertical_alignment='MIDDLE'
%}{% end_dnd_section %}

Hope this helps!


If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

0 Upvotes
Indra
Top Contributor | Diamond Partner

Hi @CSarzana,

 

Did you checked the documentation about the Drag and Drop editor. In there you will see all available properties that are possible within the dnd_area. Margin is one of them. Check:

Drag and Drop Area HubL Tags

 

I also recommend to check the video in the documentation. If your page already exists and you have changed your dnd_column, changes within the template won't overwrite the existing page. It's best to create a blank page to check if all defaults will work.

 

Also, I don't see any use of the 'margin' propertie in your code, so it's best to check that as well.


Bureau Vet

Did my post solve your question? Help the community by marking it as a solution
CSarzana
Participant | Diamond Partner

Hi @Indra 

I already checked the documentation you linked and also see the video. I see that "margin" is accepted..

 

I also know that my changes won't overwrite my existing page, in fact I always check them with the preview or on a new page.

There is no margin set in my code because I got the error I attach in my previous message. As you can see in my screenshot, it seems as top and bottom margins are accepted, but not left and right and I don't understand why.
 Thanks,

Camilla

0 Upvotes
CSarzana
Participant | Diamond Partner

Hi @Indra,
thanks for your suggestions.

I'm not working from the Boilerplate Theme, however I don't see a "margin" set in the Boilerplate theme code.

I try to set a margin on a dnd_column as you suggest but it give me the same error and it is ignored:

 

Schermata 2021-07-13 alle 11.23.25.png

 

My theme is a copy of a Markeplace theme, named "Regal Lite". I don't know if there is something in files that set as ignored the left and right margin declaration.

 

Here is my actual page code:

<!--
    templateType: page
    isAvailableForNewContent: true
    label: Landing Page SMT
    screenshotPath: ../../images/template-previews/landing-pages/lead-capture.png
-->
{% extends "../layouts/base.html" %}

<!--  Header No Navigation Code Start -->
{% block header %}
  {% global_partial path="../partials/header-no-navigation.html" %}
{% endblock header %}
<!--  End Header  No Navigation Code -->


{% block body %}
	<main class="body-container-wrapper landing-page-wrapper">
    
    {% set placeholder = {
      'src': get_asset_url('/SMT/images/template-previews/web-pages/grayscale-mountain.png'),
      'alt': 'Stock placeholder image with grayscale geometrical mountain landscape',
      'size_type': 'auto'
    }
  %}
		{% dnd_area "dnd_area" class='body-container lead-capture-page', label='Main section' %}	
    <!-- Lead Section Code Start  -->
    
    {% dnd_section, full_width=true, class="banner-main section-flex", background_color=#F9F9F9 %}
    {% dnd_column, width=6, padding={
    'left': '5%',
    'right': '5%',
    'top': '5%',
    'bottom': '5%', 
    } %}
      {% dnd_row %} 
						{% dnd_module 'content' 
							path='@hubspot/rich_text',
							 html='<p><img src="https://f.hubspotusercontent30.net/hubfs/19949987/Special-machine-tools-separatore-1.png" alt="Special Machine Tools" style="width: 180px; margin-bottom: 15px " width="180"></p>
<h3>Lorem ipsum dolor sit amet</h3>
<h1>In rationale digest. Who price over</h1>
				              <p>A rattling only especially not that find of into and sentinels check safely as is I the kings.</p>'
						%}            
						{% end_dnd_module %}
    
    {% end_dnd_row %}
    {% end_dnd_column %}
    
    {% dnd_column, width=6, offset=6,
      padding={
        'left': 0,
        'right': 0,
      }, 
      background_image = {
            'backgroundPosition': 'MIDDLE_CENTER',
            'backgroundSize': 'cover',
            'imageUrl': 'https://f.hubspotusercontent30.net/hubfs/19949987/Rettificatrici%20a%20centro%20mobile.jpg'
          },
          max_width=1000,
          vertical_alignment='MIDDLE'      
      %}
		      {% dnd_row %}
            
          {% end_dnd_row %}
    
    {% end_dnd_column %}
    
    {% end_dnd_section %}
    <!-- fine banner principale -->
    
    
    
    
        <!-- prima fascia   -->
		  {% dnd_section, full_width=true, class="section-flex"
       %}
      {% dnd_column, width=6,
       padding={
          'left': 0,
          'right': 0,
       },
      background_image = {
            'backgroundPosition': 'MIDDLE_CENTER',
            'backgroundSize': 'cover',
            'imageUrl': 'https://f.hubspotusercontent30.net/hubfs/19949987/Rettificatrici%20a%20centro%20mobile.jpg'
          },
          max_width=1000,
          vertical_alignment='MIDDLE'
      %} 
    
    {% dnd_row %}
          {% end_dnd_row %}
    {% end_dnd_column %}  
    
    {% dnd_column, width=6, offset=6,
    padding={
      'right': '5%',
      'left': '5%',
      'top': '5%',
      'bottom': '5%',
    }
    %}
    {% dnd_row %}
				{% dnd_module 'Headline' 
					path='/SMT/modules/Headline.module',
          headerline_alignment=b_left,
          headline_enable_disable_overline=true,
          headingline_overline='WHO WE ARE',
          headline_heading_title='About Company',
          headline_enable_dsiable_description=true,
          headline_description='<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>'
				%}
       {% end_dnd_module %}
    {% end_dnd_row %}
  {% dnd_row %}
    {% dnd_module "rich_text" 
      path="@hubspot/rich_text",
      html='<ul style="margin-bottom: 30px"> <li>Bullets are great</li> <li>For spelling out benefits and</li> <li>Turning visitors into leads.</li> </ul>'
      %}
    {% end_dnd_module %}
     {% end_dnd_row %}
     {% dnd_row %}
    {% dnd_module 'Button'
            path='/SMT/modules/Button.module',
            width=4,
            button_type=bordered_btn,
            button_color=base_color,
            button_size=medium_btn,
            button_text='read more'
            %}
    	      {% end_dnd_module %}    
     {% end_dnd_row %}  
		    {% end_dnd_column %}
				
  		{% end_dnd_section %}
    <!-- prima fascia End   -->
    
    <!-- seconda fascia   -->
		  {% dnd_section, background_color=#F9F9F9, class= 'section-flex' %}
      {% dnd_column, width=6,
       padding={
          'right': '5%',
      'left': '5%',
      'top': '5%',
      'bottom': '5%',
       }
      %}
		      {% dnd_row %}
				{% dnd_module 'Headline' 
					path='/SMT/modules/Headline.module',
          headerline_alignment=b_left,
          headline_enable_disable_overline=true,
          headingline_overline='WHO WE ARE',
          headline_heading_title='About Company',
          headline_enable_dsiable_description=true,
          headline_description='<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>'
				%}
       {% end_dnd_module %}
    {% end_dnd_row %}
  {% dnd_row %}
    {% dnd_module "rich_text" 
      path="@hubspot/rich_text",
      html='<ul style="margin-bottom: 30px"> <li>Bullets are great</li> <li>For spelling out benefits and</li> <li>Turning visitors into leads.</li> </ul>'
      %}
    {% end_dnd_module %}
     {% end_dnd_row %}
     {% dnd_row %}
    {% dnd_module 'Button'
            path='/SMT/modules/Button.module',
            width=4,
            button_type=bordered_btn,
            button_color=base_color,
            button_size=medium_btn,
            button_text='read more'
            %}
    	      {% end_dnd_module %}    
     {% end_dnd_row %}   
    {% end_dnd_column %}   
    {% dnd_column, width=6, offset=6,
    padding={
      'right': 0,
      'left': 0,
    }, 
      background_image = {
            'backgroundPosition': 'MIDDLE_CENTER',
            'backgroundSize': 'cover',
            'imageUrl': 'https://f.hubspotusercontent30.net/hubfs/19949987/Rettificatrici%20a%20centro%20mobile.jpg'
          },
          max_width=1000,
          vertical_alignment='MIDDLE'
    %}
		      {% dnd_row %}

          {% end_dnd_row %}
		    {% end_dnd_column %}
				
  		{% end_dnd_section %}
    <!-- seconda fascia End   -->
    <!-- banner -->
    
    {% dnd_section
     padding={
        'top': 0,
        'bottom': 0,
        'left': 0,
        'right': 0,
      },
      full_width=true,
          %}			
        {% dnd_module "module_162487726673010" path="/SMT/modules/Inner Banner", label="Inner Banner" %}
              
        {% end_dnd_module %}
		  {% end_dnd_section %}	
    <!-- Banner Section Code End  --> 
    
    <!-- Benefits Section Code Start  -->
    {% dnd_section, padding={
        'top': '5%',
        'bottom': '5%',} %}
     {% dnd_column  
     padding={        
        'left': 0,
        'right': 0,
      },%}
     {% dnd_row %}
    {% dnd_module 'Icon Boxes SMT'
    path='../../modules/Icon Boxes SMT',
    icon_box_style: ibox_sone,
    %}
    {% module_attribute "icon_box_item" %}
    [
      {       
          ibox_icon_type: "ibox_image",
          ibox_image: {
            "src": "https://f.hubspotusercontent20.net/hubfs/4057429/Regal_Core_Theme/Icons/balance-1.png"
          },
          ibox_title: "Supper Organized",
          ibox_enable_disable_description: true,
          ibox_description: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>'     
        },
        {       
          ibox_icon_type: "ibox_image",
          ibox_image: {
            "src": "https://f.hubspotusercontent20.net/hubfs/4057429/Regal_Core_Theme/Icons/creativity-1.png"
          },
          ibox_title: "Technology",
          ibox_enable_disable_description: true,
          ibox_description: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>'     
        },
        {       
          ibox_icon_type: "ibox_image",
          ibox_image: {
            "src": "https://f.hubspotusercontent20.net/hubfs/4057429/Regal_Core_Theme/Icons/idea-1.png"
          },
          ibox_title: "Artificial Intelligence",
          ibox_enable_disable_description: true,
          ibox_description: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>'     
        }    
    ]
    {% end_module_attribute %}
    {% end_dnd_module %}
    {% end_dnd_row %}
    
     		    {% end_dnd_column %}
    {% end_dnd_section %}
    <!-- Benefits Section Code End   -->
    
    <!-- SMT in numeri section -->
    
    {% dnd_section, padding={
        'top': 0,
        'bottom': 0,
        'left': 0,
        'right': 0
      },
      full_width=true,
      %}

     {% dnd_module "module_162461216983112" path="/SMT/modules/Inner Banner SMT", label="Inner Banner SMT" %}
    {% end_dnd_module %}
    
    {% end_dnd_section %}
    <!-- SMT in numeri end section -->
    
        <!-- terza fascia   -->
		  {% dnd_section,
       padding={
          'top': '5%',
          'bottom': '5%',
       } %}
      {% dnd_column, width=6,
       padding={
          'left': 0,
       }
      %}
		      {% dnd_row %}
				{% dnd_module 'Headline' 
					path='/SMT/modules/Headline.module',
          headerline_alignment=b_left,
          headline_enable_disable_overline=true,
          headingline_overline='WHO WE ARE',
          headline_heading_title='About Company',
          headline_enable_dsiable_description=true,
          headline_description='<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>'
				%}
       {% end_dnd_module %}
    {% end_dnd_row %}

  
    {% end_dnd_column %}   
    {% dnd_column, width=6, offset=6,
    padding={
      'right': 0
    }
    %}
		        {% dnd_row %}
    {% dnd_module "rich_text" 
      path="@hubspot/rich_text",
      html='<p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
      <br>Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.</p>
      <p>Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>'
      %}
    {% end_dnd_module %}
     {% end_dnd_row %}
		    {% end_dnd_column %}
				
  		{% end_dnd_section %}
    <!-- terza fascia End   -->
    
   <!-- fascia 4 box colonne -->
    
    {% dnd_section, padding={
        'top': '5%',
        'bottom': '5%',} %}
     {% dnd_column  
     padding={        
        'left': 0,
        'right': 0,
      },%}
     {% dnd_row %}
    {% dnd_module 'Image Box'
    path='../../modules/Image Box'
    %}

    {% end_dnd_module %}
    {% end_dnd_row %}
    
     		    {% end_dnd_column %}
    {% end_dnd_section %}
    <!-- end fascia colonne -->
    
    
    <!-- form -->
    
    {% dnd_section %}
				{% dnd_column, width=6,
         padding={						
					'left': 0
				},
        %}
		      {% dnd_row %}
						{% dnd_module 'content' 
							path='@hubspot/rich_text',
							 html='<h2>In rationale digest. Who price over</h2>
				              <em>Your advised myself have those got he look of using continues time business goat, little ran of thoughts and plan for receive best. </em>
				              <p>A rattling only especially not that find of into and sentinels check safely as is I the kings.</p>
				              <h6>Invitation out poured it a what:</h6><ul><li>Working and the their grateful</li><li>Any didnt out frequency, something</li><li>On built pink she home</li><li>Mostly evaluation evils sight earnestly</li><li>The royal been a the</li></ul>'
						%}            
						{% end_dnd_module %}
		      {% end_dnd_row %}
				{% end_dnd_column %}        
        {% dnd_column, width=6, offset=6,
        padding={						
					'right': 0
				},
        %}
        
          {% dnd_row %}
                  {#{% dnd_module 'Form' 
                    path='@hubspot/Form',
                    title=Get Your Free Copy,
                  %}
                  {% end_dnd_module %}#}
    {% dnd_module "module_162462571285833" path="/SMT/modules/Form SMT", label="Form SMT" %}
    {% end_dnd_module %}
                {% end_dnd_row %}
              {% end_dnd_column %}
       {% end_dnd_section %}
     <!-- Lead Section Code End  -->

    


    {% end_dnd_area %}
	</main>
{% endblock body %}

<!--  Footer No Navigation Code Start -->
{% block footer %}
  {#{% global_partial path="/generated_global_groups/48581429531.html" %}#}
<div class="footer-base">
  
{% global_partial path="/generated_global_groups/48524388371.html" %}
  </div>
{% endblock footer %}
<!--  End Footer No Navigation Code -->

For now I work with section classes to set the left margin to 0.

 

Thanks,
Camilla

0 Upvotes
Indra
Top Contributor | Diamond Partner

Hi @CSarzana,

 

Did you also looked into the HubSpot CMS Boilerplate?

I recommend to check the home.html template for example.

https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/home.html 

 

You can probable set 'margin' just like 'padding' so your code will look like this:

background_image={
  'backgroundPosition': 'MIDDLE_CENTER',
  'backgroundSize': 'cover',
  'imageUrl': get_asset_url('../images/large-placeholder-image.png')
},
max_width=700,
margin={
'default': {
  'top': 140,
  'right': 20,
  'bottom': 160,
  'left': 20
},
  'mobile': {
    'top': 80,
    'right': 20,
    'bottom': 80,
    'left': 20
  }
},
padding={
'default': {
  'top': 140,
  'right': 20,
  'bottom': 160,
  'left': 20
},
  'mobile': {
    'top': 80,
    'right': 20,
    'bottom': 80,
    'left': 20
  }
}

 

It this helped, please let me know. If not, you can share your code to check.

 


Bureau Vet

Did my post solve your question? Help the community by marking it as a solution