Has anyone experienced issues with tabs can't show the image and glitching on their mobile devices lately? I'm facing this peculiar problem where the tabs seem to be acting up. Has anyone encountered a similar glitch, and if so, how did you go about resolving it? Any insights or suggestions would be greatly appreciated! Thanks in advance. And Here is the existing section codes :
{%- if section.settings.divider -%}<div class="section--divider">{%- endif -%}
<div class="index-section">
<div class="page-width feature-row-wrapper custom-image-with-text-outter">
<div class="tbx">
{%- for block in section.blocks -%}
<div class="feature-row" id="tab-{{ block.id }}-{{ forloop.index }}">
<div class="mlkf" >
<div class="feature-row__item feature-row__text custom-image-height_desktop--{{ section.id }} feature-row__text--{{ section.settings.layout }} text-{{ block.settings.align_text }}" data-aos>
<div class="tfl custom-image-with-text">
<div class="sbtl sbtl-{{ section.id }}">
{%- if block.settings.subtitle != blank -%}
<div class="small--hide appear-delay subheading appear-delay{% cycle '','-1','-2','-3','-4' %}">{{ block.settings.subtitle }}</div>
{%- endif -%}
</div>
<div class="txfl ">
{%- if block.settings.title != blank -%}
<div class="h1 appear-delay{% cycle '','-1','-2','-3','-4' %}">{{ block.settings.title | escape }}</div>
{%- endif -%}
{%- if block.settings.text != blank -%}
<div class="rte appear-delay{% cycle '','-1','-2','-3','-4' %}">{{ block.settings.text }}</div>
{%- endif -%}
</div>
{%- if block.settings.button_label != blank -%}
<div class="rt custom-button appear-delay{% cycle '','-1','-2','-3','-4' %}">
<a href="{{ block.settings.button_link }}" class="btn lk{% if section.settings.button_style == 'secondary' %} btn--tertiary{% endif %}">
{{ block.settings.button_label }}
</a>
</div>
{%- endif -%}
</div>
</div>
{%- if section.settings.layout == 'right' -%}
<div class="feature-row__item custom-image-height_desktop--{{ section.id }}" data-aos>
<div class="main-carousel dto" data-flickity='{ "prevNextButtons": false, {% if section.settings.autoplay == true %}"autoPlay": true,{% endif %} {% if section.settings.slider-speed != blank %}"autoPlay": {{ section.settings.slider-speed | times: 1000 }},{% endif %} "setGallerySize": false }'>
{%- if block.settings.image != blank -%}
<div class="fulll carousel-cell">
<div class="image-wrap nt" style="height: 0; padding-bottom: {{ 100 | divided_by: block.settings.image.aspect_ratio }}%;">
{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="feature-row__image lazyload"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 750, 900, 1080]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
alt="{{ block.settings.image.alt }}">
</div>
</div>
{%- endif -%}
{%- if block.settings.image2 != blank -%}
<div class="fulll carousel-cell">
<div class="image-wrap nt" style="height: 0; padding-bottom: {{ 100 | divided_by: block.settings.image2.aspect_ratio }}%;">
{%- assign img_url = block.settings.image2 | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="feature-row__image lazyload"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 750, 900, 1080]"
data-aspectratio="{{ block.settings.image2.aspect_ratio }}"
data-sizes="auto"
alt="{{ block.settings.image2.alt }}">
</div>
</div>
{%- endif -%}
{%- if block.settings.image3 != blank -%}
<div class="fulll carousel-cell">
<div class="image-wrap nt" style="height: 0; padding-bottom: {{ 100 | divided_by: block.settings.image3.aspect_ratio }}%;">
{%- assign img_url = block.settings.image3| img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="feature-row__image lazyload"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 750, 900, 1080]"
data-aspectratio="{{ block.settings.image3.aspect_ratio }}"
data-sizes="auto"
alt="{{ block.settings.image3.alt }}">
</div>
</div>
{%- endif -%}
{%- if block.settings.image4 != blank -%}
<div class="fulll carousel-cell">
<div class="image-wrap nt" style="height: 0; padding-bottom: {{ 100 | divided_by: block.settings.image4.aspect_ratio }}%;">
{%- assign img_url = block.settings.image4 | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="feature-row__image lazyload"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 750, 900, 1080]"
data-aspectratio="{{ block.settings.image4.aspect_ratio }}"
data-sizes="auto"
alt="{{ block.settings.image4.alt }}">
</div>
</div>
{%- endif -%}
</div>
<div class="mg tab desktop__hide">
<ul class="tabs ">
{%- for block in section.blocks -%}
<li><a href="#tab-{{ block.id }}-{{ forloop.index }}">{{ block.settings.tab }}</a></li>
{% endfor %}
</ul>
</div>
</div>
{%- endif -%}
</div>
</div>
{% endfor %}
<div class="mg tab small--hide">
<ul class="tabs">
{%- for block in section.blocks -%}
<li><a href="#tab-{{ block.id }}-{{ forloop.index }}">{{ block.settings.tab }}</a></li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
{%- if section.settings.divider -%}</div>{%- endif -%}
