Two column Text with form most reliable

 

Note:  Module width can be set 100% (using media query min-width :1440px ) or  fixed 

Hubl 

<div class="form-outer"> <div class="form-area {{ name }}"> <div class="left-area"> <h3> {{ module.header }} </h3> {{ module.richtext_field }} </div> <div class="right-area"> <div class="form-box"> <h4 id="booking_form"> Vul hier het formulier in </h4> {% form form_to_use="{{ module.form_field.form_id }}" response_response_type="{{ module.form_field.response_type }}" response_message="{{ module.form_field.message }}" response_redirect_id="{{ module.form_field.redirect_id }}" response_redirect_url="{{module.form_field.redirect_url}}" gotowebinar_webinar_key="{{ module.form_field.gotowebinar_webinar_key }}" %} </div> </div> </div> </div> <style> .left-area h3 { font-family: {{ module.header_font.font }}; {{ module.header_font.style }}; color: {{ module.header_font.color }}; font-size: {{ module.header_font.size }}{{module.header_font.size_unit }}; } .left-area p { font-family: {{ module.text_font.font }}; {{ module.text_font.style }}; color: {{ module.text_font.color }}; font-size: {{ module.text_font.size }}{{module.text_font.size_unit }}; } .left-area ul li { font-family: {{ module.text_font.font }}; {{ module.text_font.style }}; color: {{ module.text_font.color }}; font-size: {{ module.text_font.size }}{{module.text_font.size_unit }}; } .right-area h4{ font-family: {{ module.form_header_font.font }}; {{ module.form_header_font.style }}; color: {{ module.form_header_font.color }}; font-size: {{ module.form_header_font.size }}{{module.form_header_font.size_unit }}; } .right-area form label{ font-family: {{ module.label_font.font }}; {{ module.label_font.style }}; color: {{ module.label_font.color }}; font-size: {{ module.label_font.size }}{{module.label_font.size_unit }}; } .right-area form input[type="submit"] { color: {{ module.cta_color.color }}; border: 2px solid {{ module.cta_color.color }}; background: {{ module.cta_bg_color.color }}; } .right-area form input[type="submit"]:hover { background: {{ module.hover_cta_color.color }}; border: 2px solid {{ module.hover_cta_color.color }}; } .right-area p{ font-family: {{ module.form_font.font }}; {{ module.form_font.style }}; color: {{ module.form_font.color }}; font-size: {{ module.form_font.size }}{{module.form_font.size_unit }}; } .form-area.{{ name }}{ background-color: {{ module.module_style.section_background_color.color }}; padding-top:{{ module.module_style.padding_top_desktop }}px; padding-bottom:{{ module.module_style.padding_bottom_desktop }}px; font-family: {{ module.module_style.font_field.font }}; {{ module.module_style.font_field.style }}; color: {{ module.module_style.font_field.color }}; font-size: {{ module.module_style.font_field.size }}{{module.module_style.font_field.size_unit }}; } @media screen and (max-width: 768px) { .form-area.{{ name }}{ padding-top:{{ module.module_style.padding_top_tablet }}px; padding-bottom:{{ module.module_style.padding_bottom_tablet }}px; } } @media screen and (max-width: 480px) { .form-area.{{ name }}{ padding-top:{{ module.module_style.padding_mobile_top }}px; padding-bottom:{{ module.module_style.padding_mobile_bottom }}px; } } </style>

CSS

.form-outer { width: 100%; } .form-area { display: flex; /* flex-flow: row wrap; */ max-width: 1452px; max-width: 1240px; margin: 0 auto; } .left-area { width: 44%; font-size: 18px; color: #000000; font-weight: 100; line-height: 24px; padding-right: 70px; padding-top: 60px; padding-left: 50px; padding-bottom: 40px; } .left-area h3 { line-height: 25px; margin-bottom: 20px; } .left-area p { font-size: 18px; color: #000000; font-weight: 100; line-height: 24px; margin-bottom: 10px; } .left-area ul { list-style: none; padding: 0; margin: 0; padding-left: 25px; } .left-area ul li { text-indent: -20px; margin-bottom: 20px; } .left-area ul li::before { content: "\2022"; color: #9fb000; font-weight: bold; display: inline-block; width: 15px; font-size: 25px; top: 5px; position: relative; left: 15px; } .right-area { width: 56%; /* background-color: #3894FF; */ position: relative; padding-top: 35px; } .form-box { padding: 30px 30px 30px 40px; position: absolute; left: 0; border: 1px solid #dfe3e5; background-color: #fff; /* width: 100%; */ } .right-area h4 { line-height: 25px; margin-bottom: 20px; } .right-area form {} .right-area form .hs-form-field { margin-bottom: 20px; } .right-area form .hs-form-field:nth-child(2n+0) { width: 70%; } .right-area form fieldset { max-width: 600px; } .right-area form label {} .right-area .input input::placeholder { font-weight: normal; color: #000; font-weight: 300; } .right-area .input input { height: 52px; border-radius: 0; border: 1px solid #ccc; color: #000; padding-left: 10px; padding-right: 10px; } .right-area .input .hs-input { width: 91%; } .right-area form input[type="submit"] { /* width: 180px; */ height: 50px; /* border-radius: 30px; */ border: 0; font-size: 18px; font-family: Open Sans; color: #003894; text-transform: none; margin-top: 12px; padding: 0 20px 0 20px; cursor: pointer; } .right-area p { margin-bottom: 20px; } .form-columns-2 .hs-form-field { width: 46% !important; } @media (min-width:1441px) { .form-area { /* max-width :100%; */ } } @media (max-width: 1024px) { .form-area { display: block; max-width: 100%; } .form-box { position: relative; } .left-area { padding-right: 40px; width: auto; } .left-area h3 { width: auto; } .right-area { padding: 50px 40px; width: auto; } .right-area form fieldset { max-width: 100%; } } @media (max-width: 769px) { .form-area { display: block; } .left-area {} .right-area {} .right-area .input .hs-input { width: 70%; } } @media (max-width: 580px) { .left-area { padding: 30px 20px 0 20px; font-size: 13px !important; } .left-area h3 { font-size: 15px !important; } .left-area p { font-size: 13px !important; line-height: 18px; } .left-area ul li { font-size: 13px !important; margin-bottom: 5px; } .right-area form .hs-form-field { width: 100%; float: none; } .right-area { padding: 0; } .right-area h4 { font-size: 15px !important; } .form-box { border: 0; padding: 20px 20px 50px; } .left-support { padding-left: 20px !important; padding-right: 20px !important; } .left-support p { font-size: 16px !important; } } @media (max-width: 480px) { .right-area form .hs-form-field { margin-bottom: 10px; } .right-area form label { font-size: 11px !important; line-height: 10px; padding-bottom: 0; margin-bottom: 0; } .right-area .input input { height: 25px; font-size: 12px; } .right-area p { font-size: 11px !important; margin-bottom: 10px; } .right-area form input[type="submit"] { font-size: 16px; } }