Hi together,
I need help with a costume section I made:
It is a splitted version of the ‘image with text overlay’ section from the Focal theme. What I’ve done so far is, setting up the content overlay to two content boxes side by side inside the container and give them there own editing options.
Both sides have the exact same code except for there unique tags.
This is the code with a ‘split-left-image-overlay__content-wrapper’ tag. I have a second one with a ‘split-right-image-overlay__content-wrapper’ tag:
{%- capture section_content -%}
{%- assign text_alignment = section.settings.text_position | split: '_' | last -%}
{%- if section.settings.subheadingLeft != blank -%}
##
{%- endif -%}
{%- if section.settings.titleLeft != blank -%}
###
{%- endif -%}
{%- if block.settings.title != blank -%}
###
{%- endif -%}
{%- if section.settings.contentLeft != blank or section.settings.button_text != blank -%}
{%- if section.settings.contentLeft != blank-%}
{{- section.settings.contentLeft -}}
{%- endif -%}
{%- if section.settings.button_text != blank -%}
{%- if section.settings.link_style == 'link' -%}
{{ section.settings.button_text | escape }}
{%- else -%}
{{ section.settings.button_text | escape }}
{%- endif -%}
{%- endif -%}
{%- endif -%}
In the Theme.css file I have this code:
.split-left-image-overlay__content-wrapper {
position: relative;
display: flex;
height: 100%;
width: 50%;
float: left;
align-items: var(--section-items-alignment);
justify-content: left;
padding: var(--vertical-breather) 0;
}
.split-right-image-overlay__content-wrapper {
position: relative;
display: flex;
height: 100%;
width: 50%;
float: right!important;
align-items: var(--section-items-alignment);
justify-content: right;
padding: var(--vertical-breather) 0;
}
One for left, one for right.
But here I run in my first issue. On the right site the .richtext and the .button don’t show up. It’s clickable but invisible.
The second Problem I have is, to split the background image too.
The reason why I want this is, that the two text content boxes are inside the max.1600px width container. But both Images, left and right, have to be on full width.
And the last thing I can’t figure out is, to stack everything on mobile breakpoint.
So can someone help me setting the section up?
Thanks to everyone who can help!