Debut - Image with text mobile responsive

Technical Q&A
1

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’:


  

    {% capture image_layout %}
    

      {% 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.' -%}
      
      

        

          
          

            ## {{ section.settings.title | escape }}
          

        

      

      
      {% else %}
      {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
      {% endif %}
    

    
    {% endcapture %}
    
    
      {% if section.settings.layout == 'left' %}
      {{ image_layout }}
      {% endif %}
      
      

        {% if section.settings.title != blank %}
        {% comment %}## {{ section.settings.title | escape }}{% endcomment %}
        {% endif %}
        {% if section.settings.text != blank %}
        {{ section.settings.text }}

        {% 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 -%}
        
        
        {{- section.settings.button_label | escape -}}
      
      {% endif %}
    

    
    {% if section.settings.layout == 'right' %}
    {{ image_layout }}
    {% endif %}

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

2

@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;
}
}
3

@Hardik29418

It worked! Thank you so much!

Cheers!

4

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.