<div class="widescreen widescreen--reverse">
<div class="widescreen__image " style="background-image: url('https://picsum.photos/500/700/?random');"></div>
<div class="widescreen__wrapper">
<div class="widescreen__contents">
<h3 class="heading heading--medium">Widescreen content area</h3>
<p>Ipsen offers exciting opportunities that wiill challenge your abilities, expand your skills and reward your contributon in a positive atmosphere of personal and professional development.</p>
<p>Ipsen offers exciting opportunities that wiill challenge your abilities, expand your skills and reward your contributon in a positive atmosphere of personal and professional development.</p>
<p>Ipsen offers exciting opportunities that wiill challenge your abilities, expand your skills and reward your contributon in a positive atmosphere of personal and professional development.</p>
</div>
</div>
</div>
/* @widescreen */
.widescreen {
min-height: 520px;
display: flex;
@media (max-width: $medium-screen) {
flex-wrap: wrap;
}
&--1 {
flex-direction: row-reverse;
}
&__image {
flex: 1;
flex-basis: 50%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
min-height: 200px;
min-width: 100%;
// max-height: calc(100vh - 120px); I'm not sure why this has stopped working, needs investigating
@media screen and (min-width: 768px) {
min-width: 450px;
}
@media screen and (min-width: 900px) {
position: sticky;
top: 120px;
min-height: 520px;
}
@media (max-width: 899px) {
&.preserve-image {
background-size: contain !important;
background-position: center;
max-height: calc(100vh - 40px);
min-width: 100vw !important;
}
}
}
&__wrapper {
flex: 1;
flex-basis: 50%;
@include poly-padding--large;
display: flex;
justify-content: center;
flex-direction: column;
}
&__contents {
max-width: 726px;
width: 100%;
margin: 0 auto;
}
.cta {
margin-top: $base-spacing;
&--link {
margin-left: -$base-spacing;
}
}
@media (max-width: 600px) {
.content-column>div {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
}
<?php
// $widescreen = array (
// 'key' => 'widescreen',
// 'label' => 'Widescreen Content',
// 'name' => 'widescreen',
// 'type' => 'repeater',
// 'sub_fields' => array (
// array (
// 'key' => 'widescreen_content_block__Title',
// 'label' => 'Section Title',
// 'name' => 'title', // the 'name' value for each field has to match the variable in the Twig file.
// 'type' => 'text',
// 'wrapper' => array(
// 'width' => '50%',
// 'class' => '',
// 'id' => '',
// ),
// ),
// array (
// 'key' => 'widescreen_content_block_label',
// 'label' => 'Section Label',
// 'name' => 'blocklabel',
// 'type' => 'text',
// 'instructions' => __('This label appears in in-page navigation and within the content of some blocks, overriding the title.', 'ipsen-master'),
// ),
// array (
// 'key' => 'widescreen_content_block_center_title',
// 'label' => __('Image Orientation', 'ipsen-master'),
// 'name' => 'orientation',
// // 'instructions' => __('This is optional', 'ipsen-master'),
// 'type' => 'true_false',
// 'instructions' => '',
// 'required' => 0,
// 'conditional_logic' => 0,
// 'message' => '',
// 'default_value' => 1,
// 'ui' => 1,
// 'ui_on_text' => 'Right',
// 'ui_off_text' => 'Left',
// 'wrapper' => array(
// 'width' => '50%',
// 'class' => '',
// 'id' => '',
// ),
// ),
// array (
// 'key' => 'widescreen_content_block__Intro',
// 'label' => __('Content', 'ipsen-master'),
// 'name' => 'content',
// // 'instructions' => __('This is optional', 'ipsen-master'),
// 'type' => 'wysiwyg',
// 'tabs' => 'visual',
// // 'toolbar' => 'basic',
// 'media_upload' => 1,
// ),
// ),
// 'row_min' => 0,
// 'row_limit' => '',
// 'layout' => 'row',
// );
// array_push($_SESSION["blocks"], $widescreen);