Debut - Image with text mobile responsive

[Jerome-Oletti]

Hi, I am using the debut theme and I want images with text on one page to be displayed below each other from 1024 px down (instead of 750). I cannot get it to work... Changing the order of the second image with text worked at 1024px but the 'feature-row__item's still move into one column at 750px.

the site url is: oletti.myshopify.com

the page in question is the "Over ons" page (https://oletti.nl/pages/over-ons)

Password to enter the site is: OlettiShopify2021

The html for each 'Image with text':

<div class="page-width__login-bar feature-row" style="position: relative;">
  <div class="about-image">
    {% capture image_layout %}
    <div class="feature-row__item">
      {% if section.settings.image != blank %}
      {% capture img_id %}FeatureRowImage-{{ section.id }}{% endcapture %}
      {% capture wrapper_id %}FeatureRowImageWrapper-{{ section.id }}{% endcapture %}
      {%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
      
      <div id="{{ wrapper_id }}" class="feature-row__image-wrapper js {% if section.settings.image.aspect_ratio < 1 %}portrait{% endif %}">
        <div class="about_image-height" data-image-loading-animation>
          <img id="{{ img_id }}"
          class="feature-row__image lazyload"
          data-src="{{ img_url }}"
          data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
          data-aspectratio="{{ section.settings.image.aspect_ratio }}"
          data-sizes="auto"
          alt="{{ section.settings.image.alt | escape }}">
          <div class="hero_block">
            <h2 class="hero_block-text">{{ section.settings.title | escape }}</h2>
          </div>
        </div>
      </div>
      <noscript>
        {{ section.settings.image | img_url: '600x600', scale: 2 | img_tag: section.settings.image.alt, 'feature-row__image' }}
      </noscript>
      {% else %}
      {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
      {% endif %}
    </div>
    
    {% endcapture %}
    
    <div class="feature-row">
      {% if section.settings.layout == 'left' %}
      {{ image_layout }}
      {% endif %}
      
      <div class="feature-row__item feature-row__text feature-row__text--right">
        {% if section.settings.title != blank %}
        {% comment %}<h2 class="h3">{{ section.settings.title | escape }}</h2>{% endcomment %}
        {% endif %}
        {% if section.settings.text != blank %}
        <div class="rte rte-setting featured-row__subtext">{{ section.settings.text }}</div>
        {% endif %}
        {% if section.settings.button_label != blank and section.settings.button_link != blank %}
        {%- capture ariaLabel -%}
        {{- section.settings.button_label -}}
        {%- if section.settings.button_link.type == 'frontpage_link' -%}
        : {{ 'homepage.general.title' | t -}}
        {%- elsif section.settings.button_link.type == 'catalog_link' -%}
        : {{ 'collections.catalog.title' | t -}}
        {%- elsif section.settings.button_link.object.title -%}
        : {{ section.settings.button_link.object.title -}}
        {%- endif -%}
        {%- endcapture -%}
        
        <a href="{{ section.settings.button_link }}"
        class="btn"
        aria-label="{{ ariaLabel }}">
        {{- section.settings.button_label | escape -}}
      </a>
      {% endif %}
    </div>
    
    {% if section.settings.layout == 'right' %}
    {{ image_layout }}
    {% endif %}
  </div>
  <div class="line">
  </div>
</div>
</div>

And the CSS responsible for the feature-row_item

.feature-row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center; }
  @media only screen and (max-width: 749px) {
    .feature-row {
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column; } }

.feature-row__item {
  -webkit-flex: 0 1 50%;
  -moz-flex: 0 1 50%;
  -ms-flex: 0 1 50%;
  flex: 0 1 50%; }
  @media only screen and (max-width: 749px) {
    .feature-row__item {
      -webkit-flex: 1 1 auto;
      -moz-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      width: 100%;
      max-width: 100%; } }
      @media only screen and (max-width: 1024px) {
        .about-image .feature-row__item {
          -webkit-flex: 1 1 auto;
          -moz-flex: 1 1 auto;
          -ms-flex: 1 1 auto;
          flex: 1 1 auto;
          width: 100%;
          max-width: 100%;
        }
      }

Thanks in advance!

Kind regards,

Jerome 

[Hardik29418 · Accepted solution]

@Jerome-Oletti 

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

@media only screen and (max-width: 1024px) {
.feature-row p {
    border-bottom: 2px solid #d4af37;
}
.feature-row {
    flex-wrap: wrap;
}
.line {
display: none;
}
}

[Jerome-Oletti]

@Hardik29418 

It worked! Thank you so much!

Cheers!

[Josh_Tydlacka]

My website is www.xgear101.com - I am trying to show 2 columns per row for the mobile view. It is on the home page at the bottom where it shows an image, then text underneathe, but only show 1 column per row.