Are your tabs glitching on mobile devices?

Shopify Discussion
1

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.

2

Can you provide link to your store and also a screenshot showing the glicth?

3

Here is the website link https://frontierthebrand.com , it glitch on mobile phone like when you click on it, it won’t active the tab or sometimes even duplicate the tab instead.

4

The site is password protected. Can you provide password to the store?

5

is there any chance you can help me to recreate the tab section ? here is the existing code :

{%- if section.settings.divider -%}

{%- endif -%}

{%- for block in section.blocks -%}
{%- if block.settings.subtitle != blank -%}
{{ block.settings.subtitle }}
{%- endif -%}

{%- if block.settings.title != blank -%}

{{ block.settings.title | escape }}
{%- endif -%} {%- if block.settings.text != blank -%}
{{ block.settings.text }}
{%- endif -%}

{%- if block.settings.button_label != blank -%}

{%- endif -%}

{%- if section.settings.layout == ‘right’ -%}

{%- if block.settings.image != blank -%}

{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} {{ block.settings.image.alt }}
{%- endif -%} {%- if block.settings.image2 != blank -%}
{%- assign img_url = block.settings.image2 | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} {{ block.settings.image2.alt }}
{%- endif -%} {%- if block.settings.image3 != blank -%}
{%- assign img_url = block.settings.image3| img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} {{ block.settings.image3.alt }}
{%- endif -%} {%- if block.settings.image4 != blank -%}
{%- assign img_url = block.settings.image4 | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} {{ block.settings.image4.alt }}
{%- endif -%}

{%- endif -%}

{% endfor %}

{%- if section.settings.divider -%}

{%- endif -%}

ul.tabs li { list-style: none; margin-bottom: 20px; } ul.tabs li { list-style: none; margin-bottom: 15px; } @media only screen and (max-width: 769px){ .rt.appear-delay-3 { text-align: right; margin-top: 10px; } .dto .flickity-viewport { height: 75vh; transition: none; } .mg.tab { flex: 20%; position: initial; bottom: 38%; } .feature-row__text { padding: 30px 20px 20px; } } @media only screen and (min-width: 768px){ .custom-image-with-text .txfl { position: unset; } }

{% schema %}
{
“name”: “About Us section”,
“settings”: [
{
“type”: “select”,
“id”: “button_style”,
“label”: “t:sections.text-and-image.settings.button_style.label”,
“default”: “primary”,
“options”: [
{
“value”: “primary”,
“label”: “t:sections.text-and-image.settings.button_style.options.primary.label”
},
{
“value”: “secondary”,
“label”: “t:sections.text-and-image.settings.button_style.options.secondary.label”
}
]
},
{
“type”: “select”,
“id”: “align_text”,
“label”: “t:sections.text-and-image.settings.align_text.label”,
“default”: “left”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.text-and-image.settings.align_text.options.left.label”
},
{
“value”: “center”,
“label”: “t:sections.text-and-image.settings.align_text.options.center.label”
},
{
“value”: “right”,
“label”: “t:sections.text-and-image.settings.align_text.options.right.label”
}
]
},
{
“type”: “select”,
“id”: “layout”,
“label”: “t:sections.text-and-image.settings.layout.label”,
“default”: “right”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.text-and-image.settings.layout.options.left.label”
},
{
“value”: “right”,
“label”: “t:sections.text-and-image.settings.layout.options.right.label”
}
]
},
{
“type”: “checkbox”,
“id”: “image_full_screen_height”,
“label”: “Make Image Full Height”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “divider”,
“label”: “t:sections.text-and-image.settings.divider.label”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “autoplay”,
“label”: “Autoplay Slider”,
“default”: false
},
{
“type”: “number”,
“id”: “slider-speed”,
“label”: “Slider rotate after”,
“default”: 5
}
],
“blocks”: [
{
“type”: “tab”,
“name”: “Tabs”,
“settings”: [
{
“type”: “text”,
“id”: “tab”,
“label”: “Tab”
},
{
“type”: “image_picker”,
“id”: “image”,
“label”: “t:sections.text-and-image.settings.image.label”
},
{
“type”: “image_picker”,
“id”: “image2”,
“label”: “t:sections.text-and-image.settings.image2.label”
},
{
“type”: “image_picker”,
“id”: “image3”,
“label”: “Image 3”
},
{
“type”: “image_picker”,
“id”: “image4”,
“label”: “Image 4”
},
{
“type”: “range”,
“id”: “image_width”,
“label”: “t:sections.text-and-image.settings.image_width.label”,
“default”: 700,
“min”: 200,
“max”: 700,
“step”: 10,
“unit”: “px”
},
{
“type”: “text”,
“id”: “subtitle”,
“label”: “t:sections.text-and-image.settings.subtitle.label”
},
{
“type”: “text”,
“id”: “title”,
“label”: “t:sections.text-and-image.settings.title.label”,
“default”: “Image with text”
},
{
“type”: “richtext”,
“id”: “text”,
“label”: “t:sections.text-and-image.settings.text.label”,
“default”: “

Pair large text with an image to tell a story, explain a detail about your product, or describe a new promotion.

”
},
{
“type”: “text”,
“id”: “button_label”,
“label”: “t:sections.text-and-image.settings.button_label.label”
},
{
“type”: “url”,
“id”: “button_link”,
“label”: “t:sections.text-and-image.settings.button_link.label”
}
]
}
],
“presets”: [
{
“name”: “About Us section”
}
]
}
{% endschema %}
{% style %}
{% if section.settings.image_full_screen_height %}

@media only screen and (min-width: 768px){
.custom-image-height_desktop–{{ section.id }}{
height: 81vh;
margin-top: auto;
}
}
{% endif %}
{% endstyle %}