Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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
Solved! Go to the solution
This is an accepted solution.
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;
}
}
This is an accepted solution.
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;
}
}
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.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025