How do I get 4 images with text overlay on 1 row (highlight theme)

Nakata_Satoru
Tourist
5 0 1

 

Hey guys, 

I keep trying to get 4 images on 1 line in the full width of the screen but I can't seem to get it work on the: images-with-text-overlay.liquid, (see code below). Anyone any idea how to fix this?

 

Regards,

 

Nakata
{%- if section.settings.title != blank -%}
<div class="section-header grid-item push-left-one-tenth lap--push-left-none">
<h2 class="section-header__title h4">{{ section.settings.title | escape }}</h2>
</div>
{%- endif -%}

<div class="image-with-text-overlay-holder image-with-text-overlay-holder--{{ section.settings.layout }} grid">

{%- for block in section.blocks -%}

{%- liquid

if section.settings.layout == 'regular'

assign css_class = ''

if section.blocks.size == 1 or forloop.index == 1 and section.blocks.size == 3
assign css_class = 'text-large ten-tenths lap--full-width push-left-one-tenth lap--push-left-none'
elsif section.blocks.size == 3
assign css_class = 'text-medium four-plus-tenths lap--five-plus-tenths push-top-one-tenth push-left-one-tenth'
if forloop.index == 2
assign css_class = css_class | append: ' lap--push-left-none'
endif
elsif section.blocks.size == 4 or section.blocks.size == 2
assign css_class = 'text-medium four-plus-tenths lap--five-plus-tenths push-top-one-tenth push-left-one-tenth'
if forloop.index == 1 or forloop.index == 3
assign css_class = css_class | append: ' lap--push-left-none'
endif
endif

if section.blocks.size == 4 and forloop.index > 2
assign css_class = css_class | append: ' push-top-one-tenth'
endif

else

if forloop.index == 1

if section.blocks.size == 1
assign css_class = 'text-large eight-tenths lap--ten-tenths push-left-one-tenth lap--push-left-none'
elsif section.blocks.size == 2
assign css_class = 'text-large five-tenths lap--seven-tenths push-left-one-tenth lap--push-left-none'
elsif section.blocks.size > 2
assign css_class = 'text-large six-tenths lap--seven-tenths push-left-one-tenth lap--push-left-none'
endif

elsif forloop.index == 2 or forloop.index == 4

if section.blocks.size == 2
assign css_class = 'text-medium four-tenths'
else
assign css_class = 'text-small three-tenths push-top-two-tenths'
endif
if forloop.index == 4
assign css_class = css_class | append: ' lap--five-tenths'
else
assign css_class = css_class | append: ' lap--four-tenths lap--push-top-three-tenths'
endif
assign css_class = css_class | append: ' push-left-one-tenth'

elsif forloop.index == 3

assign css_class = 'text-medium four-tenths lap--five-tenths palm--full-width'
if section.blocks.size == 4
assign css_class = css_class | append: ' push-left-two-tenths lap--push-left-none push-top-two-tenths lap--push-top-none'
else
assign css_class = css_class | append: ' push-left-three-tenths lap--push-left-two-tenths push-top-one-tenth'
endif

endif

endif

-%}

<div class="image-with-text-overlay {{ css_class }}" {{ block.shopify_attributes }}
{% unless section.settings.layout == 'regular' %}
{% if forloop.index == 2 %}
{% if section.blocks.size == 2 %}
data-scroll-speed=".3"
{% else %}
data-scroll-speed="-.3"
{% endif %}
{% elsif forloop.index == 3 and section.blocks.size == 4 %}
data-scroll-speed=".3"
{% endif %}
data-scroll-disable-on-lap
{% endunless %}
>

{%- if block.settings.button_label == blank and block.settings.button_link != blank -%}
<a href="{{ block.settings.button_link }}" class="image-with-text-overlay__wrap">
{%- else -%}
<div class="image-with-text-overlay__wrap">
{%- endif -%}

<div class="image-with-text-overlay__background">
{%- unless block.settings.image == blank -%}
{%- render 'lazy-image', image: block.settings.image, alt: block.settings.heading, type: 'background', alignment: block.settings.alignment -%}
{%- else -%}
<span class="onboarding-svg">
{{ 'image' | placeholder_svg_tag }}
</span>
{%- endunless -%}
</div>

<div class="image-with-text-overlay__content {{ section.settings.text_alignment }}">

<div>

{%- if block.settings.heading != blank -%}
<span class="image-with-text-overlay__heading"><span>{{ block.settings.heading | escape }}</span></span>
{%- endif -%}

{%- if block.settings.description != blank -%}
<div class="image-with-text-overlay__description rte">{{ block.settings.description }}</div>
{%- endif -%}

{%- if block.settings.button_label != blank -%}
<a class="image-with-text-overlay__button button button--underline" href="{{ block.settings.button_link }}" title="{{ block.settings.button_label | escape }}">
{{ block.settings.button_label | escape }}
<span class="svg svg__arrow" aria-hidden="true">{% render 'theme-symbols', icon: 'arrow-right' %}</span>
</a>
{%- endif -%}

</div>

</div>

{%- if block.settings.button_label == blank and block.settings.button_link != blank -%}
</a>
{%- else -%}
</div>
{%- endif -%}

</div>

{%- endfor -%}

Replies 5 (5)
suyash1
Shopify Partner
4994 576 835

@ can you please share your website link? we may need css for it

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30, to build shopify pages use pagefly
Nakata_Satoru
Tourist
5 0 1

Hi there,

 

Thanks for reaching out so quickly,

 

Hereby the link:

https://www.hippashop.com/

 

Working on the grid in a draft version. Using the Grid in Asymmetrical mode on the live website and 'regular grid' in the updated version, which only allows for 2 images per row. 

suyash1
Shopify Partner
4994 576 835

@ - can you please share preview link of regular grid version?

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30, to build shopify pages use pagefly
Nakata_Satoru
Tourist
5 0 1