I want to add a map next to a contact form. I used the leaflet option.
I want it to cover the full height of the contact form column that changes with the screen size a bit. I tried to add the height at 100% but the map doesn't show and if I set a specific height then there is a chance that a black space appears below if the contact form heigh varies on a different screen size. How can this be fixed? On the screen shots attached you can see the map no appearing when using % and the black space when difference between the next column, I exagerated it to be noticable so you can see what I mean, this changes depending on screen size so it can be very small or not that small.
This is what is being used in the visual composer. Im doing tests so mostly is salient editor content.
Actually, if I make the map huge as 1500 height, there is a small back gap always only on the map colum, the contact form colum just keeps getting bigger below the form without any issues with the background.
I want to add a map next to a contact form. I used the leaflet option.
I want it to cover the full height of the contact form column that changes with the screen size a bit. I tried to add the height at 100% but the map doesn't show and if I set a specific height then there is a chance that a black space appears below if the contact form heigh varies on a different screen size. How can this be fixed? On the screen shots attached you can see the map no appearing when using % and the black space when difference between the next column, I exagerated it to be noticable so you can see what I mean, this changes depending on screen size so it can be very small or not that small.
This is what is being used in the visual composer. Im doing tests so mostly is salient editor content.
[vc_row type="full_width_background" full_screen_row_position="middle" bg_image="https://source.unsplash.com/featured/1800x700/daily/?working" bg_position="center bottom" bg_repeat="no-repeat" bg_color="#333333" scene_position="center" text_color="light" text_align="left" top_padding="15%" bottom_padding="5%" overlay_strength="0.8" shape_divider_position="bottom" shape_type=""][vc_column column_padding="no-extra-padding" column_padding_position="all" background_color_opacity="1" background_hover_color_opacity="1" column_link_target="_self" column_shadow="none" column_border_radius="none" width="1/1" tablet_width_inherit="default" tablet_text_alignment="default" phone_text_alignment="default" column_border_width="none" column_border_style="solid"][divider line_type="No Line" custom_height="300"][vc_row_inner column_margin="default" text_align="left"][vc_column_inner column_padding="padding-3-percent" column_padding_position="all" background_color="#ff1053" background_color_opacity="1" background_hover_color_opacity="1" column_shadow="large_depth" column_border_radius="10px" column_link_target="_self" width="1/4" tablet_width_inherit="default" column_border_width="none" column_border_style="solid" offset="vc_col-lg-3 vc_col-md-4 vc_col-xs-8"][vc_column_text]
The Salient
58 Nectar Rd. Apt 2C Malibu, California
[/vc_column_text][nectar_cta btn_style="underline" heading_tag="h5" text_color="#ffffff" link_type="new_tab" alignment="left" link_text="Get Directions" url="
Actually, if I make the map huge as 1500 height, there is a small back gap always only on the map colum, the contact form colum just keeps getting bigger below the form without any issues with the background.
Hey,
Try turning off the Column Animation in Map Column.
Please provide the page url so that i can write up the custom css for whats possible.
Thanks
ThemeNectar Support Team