Edit “small” width - image with text section (Dawn)

Technical Q&A
1

Hi,

I have added a 600x315 image to image with text section. The image gets rendered to a 548x306 image. I want small to be the image’s actual width.

rendered.png
rendered.png1920×1020 177 KB

I added the image’s width size to image-with-text.liquid but nothing has changed, so the rendering reason must be located in another file.

<div class="image-with-text image-with-text--{{ section.settings.content_layout }} page-width isolate{% if settings.text_boxes_border_thickness > 0 and settings.text_boxes_border_opacity > 0 and settings.media_border_thickness > 0 and settings.media_border_opacity > 0 %} collapse-borders{% endif %}{% unless section.settings.color_scheme == 'background-1' and settings.media_border_thickness > 0 and settings.text_boxes_shadow_opacity == 0 and settings.text_boxes_border_thickness == 0 or settings.text_boxes_border_opacity == 0 %} collapse-corners{% endunless %} section-{{ section.id }}-padding">
  <div class="image-with-text__grid grid grid--gapless grid--1-col grid--{% if section.settings.desktop_image_width == 'medium' %}2-col-tablet{% else %}3-col-tablet{% endif %}{% if section.settings.layout == 'text_first' %} image-with-text__grid--reverse{% endif %}">
    <div class="image-with-text__media-item image-with-text__media-item--{{ section.settings.desktop_image_width }} image-with-text__media-item--{{ section.settings.desktop_content_position }} grid__item">
      <div class="image-with-text__media image-with-text__media--{{ section.settings.height }} gradient color-{{ section.settings.color_scheme }} global-media-settings {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
        {% if section.settings.height == 'adapt' and section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
      >
        {%- if section.settings.image != blank -%}
          {%- capture sizes -%}(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2){%- endcapture -%}
          {{ section.settings.image | image_url: width: 1500 | image_tag:
            loading: 'lazy',
            sizes: sizes,
            widths: '165, 360, 535, **600**, 750, 1070, 1500'
          }}
        {%- else -%}
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {%- endif -%}
      </div>
    </div>

Does anyone know which file I have to edit? Thanks.

2

Anyone?