How can I replace a flexslider with stacked content in Shopify?

Question

On the desktop version of our site, we have a 3 column section (the theme calls is text-adverts) with one about pickup, one about delivery, one about shipping. On mobile, it automatically converts to a flexslider with no arrows or really any way of knowing to swipe unless you watch it long enough. I'd much rather just have the 3 stacked so no users miss this critical info.

I've found the code dealing with the text-adverts on mobile but I don't know what to replace it with. Any help is much appreciated.

  <div class="container d-block d-md-none">
    <div class="row text-advert-section mobile-homepage-text-adverts flexslider text-adverts-alignment--{{ text-advert--alignment }}">
      <ul class="slides">
        {% for block in section.blocks %}

          {%- assign advert_has_link = false -%}
          {% if block.settings.link != blank %}
            {%- assign advert_has_link = true -%}
          {% endif %}

          <li {{ block.shopify_attributes }}>
            <div class="grid__item text-advert-section__item{% if advert_has_link %} text-advert-section__item--link{% endif %}">
              {% if advert_has_link %}<a href="{{ block.settings.link }}">{% endif %}

                {% if block.settings.icon != 'none' %}
                <div class="text-advert-section__icon-wrapper {{ section.settings.icon-size }}">
                  <i data-feather="{{ block.settings.icon }}"></i>
                </div>
                {% endif %}

                <div class="text-advert-section__text-wrapper">

                  {% if block.settings.heading != blank %}
                    <span class="text-advert-section__header type-subheading type-subheading--1">{{ block.settings.heading | escape }}</span>
                  {% endif %}

                  {% if block.settings.subheading != blank %}
                    <span class="text-advert-section__sub-header h6">{{ block.settings.subheading | escape }}</span>
                  {% endif %}
                </div>

              {% if advert_has_link %}</a>{% endif %}
            </div>
          </li>

        {% endfor %}
      </ul>
    </div>
  </div>

Answer 1

The flexslider is being initialised by javascript. So you need to find the script that initialises the slider. Most likely it will look something like this: $('.flexslider').flexslider({})

You should also remove the flexslider class from the div with class text-advert-section - because it shouldn't utilise any flexslider code.