Columns and "Custom top and bottom margin" on mobile view

Everything is said above. If you see this like me:

second color-section (green bg) with columns set to equal height and with negative shift of all columns to top – here everything is ok.
on bottom a color-section ( yellow one ) a copy of all columns – but set to individual height – same negative margin to shift to top – overlapping 3 columns – the fist looks out a bit – caused to margin-left : 0 – on mobile – totaly overlapping of all 3 columns.

for you to copy:

[av_section min_height='25' min_height_pc='25' min_height_px='500px' padding='default' custom_margin='0px' custom_margin_sync='true' color='main_color' background='bg_color' custom_bg='#d65799' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' shadow='no-border-styling' bottom_border='no-border-styling' bottom_border_diagonal_color='#333333' bottom_border_diagonal_direction='' bottom_border_style='' custom_arrow_bg='' id='' custom_class='' template_class='' aria_label='' av_element_hidden_in_editor='0' av_uid='av-kn75k2l9' sc_version='1.0'][/av_section]

[av_section min_height='25' min_height_pc='25' min_height_px='500px' padding='default' custom_margin='0px' custom_margin_sync='true' color='main_color' background='bg_color' custom_bg='#83a846' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' shadow='no-border-styling' bottom_border='no-border-styling' bottom_border_diagonal_color='#333333' bottom_border_diagonal_direction='' bottom_border_style='' custom_arrow_bg='' id='' custom_class='' template_class='' aria_label='' av_element_hidden_in_editor='0' av_uid='av-kn75k86o' sc_version='1.0']

[av_one_third first min_height='av-equal-height-column' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='aviaTBcustom_margin' margin='-200px,0px' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='30px' padding_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='#e5e5e5' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' template_class='' aria_label='' av_uid='av-kn75l7zt' sc_version='1.0']

[av_heading heading='Eine nette Überschrift' tag='h3' style='' subheading_active='' show_icon='' icon='' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' icon_color='' margin=',,,,' padding='10' icon_padding='10' link='' link_target='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' id='' custom_class='' template_class='' av_uid='av-3khuw' sc_version='1.0'][/av_heading]

[/av_one_third][av_one_third min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='30px' padding_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='#ede2d3' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' template_class='' aria_label='' av_uid='av-kn75m2i6' sc_version='1.0']

[av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' id='' custom_class='' template_class='' av_uid='av-9k2g' sc_version='1.0']
Klicke hier, um Ihren eigenen Text einzufügen
[/av_textblock]

[/av_one_third][av_one_third min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='30px' padding_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='#ede2d3' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' template_class='' aria_label='' av_uid='av-1vw80' sc_version='1.0']

[av_heading heading='Eine nette Überschrift' tag='h3' style='' subheading_active='' show_icon='' icon='' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' icon_color='' margin=',,,,' padding='10' icon_padding='10' link='' link_target='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' id='' custom_class='' template_class='' av_uid='av-1ed7c' sc_version='1.0'][/av_heading]

[av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' id='' custom_class='' template_class='' av_uid='av-rl7w' sc_version='1.0']
Klicke hier, um Ihren eigenen Text einzufügen
[/av_textblock]

[/av_one_third][/av_section][av_section min_height='25' min_height_pc='25' min_height_px='500px' padding='default' custom_margin='0px' custom_margin_sync='true' color='main_color' background='bg_color' custom_bg='#eeee22' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' shadow='no-border-styling' bottom_border='no-border-styling' bottom_border_diagonal_color='#333333' bottom_border_diagonal_direction='' bottom_border_style='' custom_arrow_bg='' id='' custom_class='' template_class='' aria_label='' av_element_hidden_in_editor='0' av_uid='av-kn75tsfl' sc_version='1.0']

[av_one_third first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='aviaTBcustom_margin' margin='-200px,0px' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='30px' padding_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='#e5e5e5' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' template_class='' aria_label='' av_uid='av-kn75tmau' sc_version='1.0']

[av_heading heading='Eine nette Überschrift' tag='h3' style='' subheading_active='' show_icon='' icon='' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' icon_color='' margin=',,,,' padding='10' icon_padding='10' link='' link_target='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' id='' custom_class='' template_class='' av_uid='av-3zd4c' sc_version='1.0'][/av_heading]

[/av_one_third][av_one_third min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='30px' padding_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='#ede2d3' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' template_class='' aria_label='' av_uid='av-37i6s' sc_version='1.0']

[av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' id='' custom_class='' template_class='' av_uid='av-2l0rw' sc_version='1.0']
Klicke hier, um Ihren eigenen Text einzufügen
[/av_textblock]

[/av_one_third][av_one_third min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' border='' border_color='' radius='0px' radius_sync='true' padding='30px' padding_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='#ede2d3' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' template_class='' aria_label='' av_uid='av-1wz18' sc_version='1.0']

[av_heading heading='Eine nette Überschrift' tag='h3' style='' subheading_active='' show_icon='' icon='' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' icon_color='' margin=',,,,' padding='10' icon_padding='10' link='' link_target='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' id='' custom_class='' template_class='' av_uid='av-1enuo' sc_version='1.0'][/av_heading]

[av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' id='' custom_class='' template_class='' av_uid='av-uwqo' sc_version='1.0']
Klicke hier, um Ihren eigenen Text einzufügen
[/av_textblock]

[/av_one_third][/av_section]

A solution would be to have analog to the equal-height ( min-height option in columns.php) an additional wrapper div even for individual height option that will have the style on that.

By the way – this seems to be a general problem on floating divs and negative margins.
f.e: https://www.smashingmagazine.com/2009/07/the-definitive-guide-to-using-negative-margins/#negative-margins-on-floated-elements

Thanks Ismael – this was a bug info – and not a find a solution topic ;)
The first solution is acceptable the second one is not so practicable, because you see from the example page, if the “shifted” color-section has a background it becomes problematic.
I never noticed that, because I used it mostly only when I wanted to move a 1/1 column up – like it is often done in this demo : https://kriesi.at/themes/enfold-church/
In principle, the question remains whether maintaining the negative margin in the responsive case makes sense at all.

can be closed