Two Column Text, CTA, bullets points with image only.

 

Note: image have no special alignment, However we can switch the position between text div and image div using flex-direction: row-reverse;

HUBL

<div class="webinar-bg {{ name }}"> <div class="right-webinar"> {% if module.image_field.src %} {% set sizeAttrs = 'width="{{ module.image_field.width }}" height="{{ module.image_field.height }}"' %} {% if module.image_field.size_type == 'auto' %} {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %} {% elif module.image_field.size_type == 'auto_custom_max' %} {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.image_field.max_width }}px; max-height: {{ module.image_field.max_height }}px"' %} {% endif %} {% set loadingAttr = module.image_field.loading != 'disabled' ? 'loading="{{ module.image_field.loading }}"' : '' %} <img src="{{ module.image_field.src }}" alt="{{ module.image_field.alt }}" {{ loadingAttr }} {{ sizeAttrs }}> {% endif %} </div> <div class="left-webinar"> <h3> {{ module.header }} </h3> {{ module.richtext_field }} {% cta guid="{{ module.cta_field }}" %} </div> </div> <style> .left-webinar 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-webinar 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-webinar 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 }}; } .left-webinar a.cta-btn, .left-webinar a.cta_button { font-family: {{ module.cta_font.font }}; {{ module.cta_font.style }}; color: {{ module.cta_font.color }}; font-size: {{ module.cta_font.size }}{{module.cta_font.size_unit }}; background-color: {{ module.cta_color.color }}; } .left-webinar a.cta-btn:hover, .left-webinar a.cta_button:hover { background-color: {{ module.cta_hover_color.color }}; color: {{ module.cta_hover.color }}; } .webinar-bg.{{ 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) { .webinar-bg.{{ 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) { .webinar-bg.{{ name }}{ padding-top:{{ module.module_style.padding_mobile_top }}px; padding-bottom:{{ module.module_style.padding_mobile_bottom }}px; } } </style>

CSS

.webinar-bg { display: flex; flex-flow: row wrap; max-width: 1440px; margin: 0 auto; padding: 0px; /* margin-bottom: 200px; */ flex-direction: row-reverse; background-color: #7DC7FF; } .left-webinar { width: 48%; font-size: 18px; color: #000000; font-weight: 100; line-height: 24px; padding-right: 174px; padding-top: 90px; padding-bottom: 90px; padding-left: 40px } .left-webinar h3 { font-size: 32px; line-height: 40px; font-family: Open Sans; color: #003894; font-weight: normal; width: 450px; } .left-webinar p { font-size: 18px; color: #000000; font-weight: 100; line-height: 24px; } .left-webinar a.cta-btn, .left-webinar a.cta_button { margin-top: 20px; } .left-webinar ul { list-style: none; padding: 0; margin: 0; padding-left: 40px; } .left-webinar ul li { text-indent: -20px; margin-bottom: 20px; } .left-webinar ul li::before { content: "\2022"; color: #003894; font-weight: bold; display: inline-block; width: 15px; font-size: 30px; top: 5px; position: relative; } .right-webinar { width: 52%; text-align: right; } .right-webinar form {} .right-webinar 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; } @media (min-width:1441px) { .webinar-bg { max-width: 100%; } } @media (max-width: 1024px) { .left-webinar { padding-right: 40px; } .left-webinar h3 { width: auto; } } @media (max-width: 769px) { .webinar-bg { display: block; } .left-webinar { width: 100%; padding-bottom: 30px; } .right-webinar { width: 100%; text-align: center; } }