Image overlap into the text on mobile version SHOPIFY

I have problem with the mobile view of my layout but on the other screen looks fine.

The image overlap into the text please check the image below.

enter image description here

I used grid and add some css to fix my margins and padding to match all the sections. Please check my demo site for reference: https://strokes-test.myshopify.com/

collection-section.liquid

    <div class="proTitle text-center">
        <h2>{{ section.settings.title | escape }}</h2>
    </div>
{% endif %}

  {%- assign collection = collections[section.settings.collection] -%}

  {% case section.settings.grid %}
    {% when 2 %}
      {%- assign max_height = 530 -%}
      {%- assign grid_item_width = 'medium-up--one-half' -%}
    {% when 3 %}
      {%- assign max_height = 345 -%}
      {%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
    {% when 4 %}
      {%- assign max_height = 250 -%}
      {%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
    {% when 5 %}
      {%- assign max_height = 195 -%}
      {%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
  {% endcase %}

  {%- assign product_limit = section.settings.grid | times: section.settings.rows -%}

      <div class="grid2-section text-image-section">
          <div class ="page-width">
    <div class="grid2-in full-width-bx">

      <div class="grid__item one-third">
      <img src="{{section.settings.image_banner | img_url:'master' }};">
      
    </div>
     <div class="grid__item two-thirds">
  <ul class="grid grid--uniform grid--view-items">
  
        
    {% for product in collection.products limit: product_limit %}
      <li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
        {% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
      </li>
    {% else %}

      {% for i in (1..product_limit) %}
        <li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
          <div class="grid-view-item product-card">
            <a class="grid-view-item__link grid-view-item__image-container full-width-link" href="#">
              <span class="visually-hidden">{{ 'homepage.onboarding.product_title' | t }}</span>
            </a>
            <div class="grid-view-item__image-wrapper">
              {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
              {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
            </div>
            <div class="h4 grid-view-item__title" aria-hidden="true">{{ 'homepage.onboarding.product_title' | t }}</div>
            {% include 'product-price' %}
          </div>
        </li>
      {% endfor %}
    {% endfor %}
  </ul>
        </div>
            </div>
        </div>
 </div>
{% schema %}
{
  "name": {
    "da": "Udvalgt kollektion",
    "de": "Vorgestellte Kategorie",
    "en": "Category collection",
    "es": "Colección destacada",
    "fi": "Esittelyssä oleva kokoelma",
    "fr": "Collection en vedette",
    "hi": "फ़ीचर्ड कलेक्शन",
    "it": "Collezione in evidenza",
    "ja": "特集コレクション",
    "ko": "추천 컬렉션",
    "nb": "Utvalgt samling",
    "nl": "Uitgelichte collectie",
    "pt-BR": "Coleção em destaque",
    "pt-PT": "Coleção em destaque",
    "sv": "Utvald kollektion",
    "th": "คอลเลกชันแนะนำ",
    "zh-CN": "特色产品系列",
    "zh-TW": "精選商品系列"
  },
  "class": "index-section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": {
        "da": "Overskrift",
        "de": "Titel",
        "en": "Heading",
        "es": "Título",
        "fi": "Otsake",
        "fr": "En-tête",
        "hi": "शीर्षक",
        "it": "Heading",
        "ja": "見出し",
        "ko": "제목",
        "nb": "Overskrift",
        "nl": "Kop",
        "pt-BR": "Título",
        "pt-PT": "Título",
        "sv": "Rubrik",
        "th": "ส่วนหัว",
        "zh-CN": "标题",
        "zh-TW": "標題"
      },
      "default": {
        "da": "Udvalgt kollektion",
        "de": "Vorgestellte Kategorie",
        "en": "Category collection",
        "es": "Colección destacada",
        "fi": "Esittelyssä oleva kokoelma",
        "fr": "Collection en vedette",
        "hi": "फ़ीचर्ड कलेक्शन",
        "it": "Collezione in evidenza",
        "ja": "特集コレクション",
        "ko": "추천 컬렉션",
        "nb": "Fremhevet samling",
        "nl": "Uitgelichte collectie",
        "pt-BR": "Coleção em destaque",
        "pt-PT": "Coleção em destaque",
        "sv": "Utvald kollektion",
        "th": "คอลเลกชันแนะนำ",
        "zh-CN": "特色产品系列",
        "zh-TW": "精選商品系列"
      }
    },
    {
      "id": "collection",
      "type": "collection",
      "label": {
        "da": "Kollektion",
        "de": "Kategorie",
        "en": "Collection",
        "es": "Colección",
        "fi": "Kokoelma",
        "fr": "Collection",
        "hi": "कलेक्शन",
        "it": "Collezione",
        "ja": "コレクション",
        "ko": "컬렉션",
        "nb": "Samling",
        "nl": "Collectie",
        "pt-BR": "Coleção",
        "pt-PT": "Coleção",
        "sv": "Produktserie",
        "th": "คอลเลกชัน",
        "zh-CN": "收藏",
        "zh-TW": "商品系列"
      }
    },
    {
      "type": "range",
      "id": "grid",
      "label": {
        "da": "Produkter pr. række",
        "de": "Produkte per Reihe",
        "en": "Products per row",
        "es": "Productos por fila",
        "fi": "Tuotteita per rivi",
        "fr": "Produits par rangée",
        "hi": "प्रति पंक्ति उत्पाद",
        "it": "Prodotti per riga",
        "ja": "行あたりの商品数",
        "ko": "열 별 제품",
        "nb": "Produkter per rad",
        "nl": "Producten per rij",
        "pt-BR": "Produtos por linha",
        "pt-PT": "Produtos por linha",
        "sv": "Produkter per rad",
        "th": "สินค้าต่อแถว",
        "zh-CN": "每行产品数",
        "zh-TW": "每列產品數"
      },
      "min": 2,
      "max": 5,
      "step": 1,
      "default": 3
    },
    {
      "type": "range",
      "id": "rows",
      "label": {
        "da": "Rækker",
        "de": "Reihen",
        "en": "Rows",
        "es": "Filas",
        "fi": "Rivit",
        "fr": "Rangées",
        "hi": "पंक्ति",
        "it": "Righe",
        "ja": "行",
        "ko": "열",
        "nb": "Rader",
        "nl": "Rijen",
        "pt-BR": "Linhas",
        "pt-PT": "Linhas",
        "sv": "Rader",
        "th": "แถว",
        "zh-CN": "行数",
        "zh-TW": "列"
      },
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 2
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "label": {
        "da": "Vis produktleverandører",
        "de": "Produkt-Lieferanten anzeigen",
        "en": "Show product vendors",
        "es": "Mostrar proveedores del producto",
        "fi": "Näytä tuotteen myyjät",
        "fr": "Afficher les vendeurs",
        "hi": "उत्पाद विक्रेताओं को दिखाएं",
        "it": "Mostra fornitori prodotto",
        "ja": "商品の販売元を表示する",
        "ko": "제품 공급 업체 표시",
        "nb": "Vis produktleverandører",
        "nl": "Productleveranciers weergeven",
        "pt-BR": "Exibir fornecedores do produto",
        "pt-PT": "Mostrar fornecedores do produto",
        "sv": "Visa produktleverantörer",
        "th": "แสดงผู้ขายสินค้า",
        "zh-CN": "显示产品厂商",
        "zh-TW": "顯示產品廠商"
      },
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "label": {
        "da": "Vis knappen "Se flere"",
        "de": "'Alle anzeigen' Button anzeigen",
        "en": "Show 'View all' button",
        "es": "Mostrar el botón 'Ver todo'",
        "fi": "Näytä "Näytä kaikki" -painike",
        "fr": "Afficher le bouton “Tout voir”",
        "hi": "'सभी देखें' बटन दिखाएं",
        "it": "Mostra il pulsante "Visualizza tutto"",
        "ja": "「すべて表示」ボタンを表示する",
        "ko": "'모두 보기' 버튼 표시",
        "nb": "Vis «Se alle»-knapp",
        "nl": "Knop 'Alles weergeven' weergeven",
        "pt-BR": "Exibir botão 'Visualizar tudo'",
        "pt-PT": "Mostrar botão 'Ver tudo'",
        "sv": "Visa "Visa alla"-knappen",
        "th": "แสดงปุ่ม 'ดูทั้งหมด'",
        "zh-CN": "显示“查看全部”按钮",
        "zh-TW": "顯示「檢視全部」按鈕"
      },
      "default": false
    },

        {
          "id": "image_banner",
          "type": "image_picker",
          "label": "Image"
       
    
        }
  ],
  "presets": [
    {
      "name": {
        "da": "Udvalgt kollektion",
        "de": "Vorgestellte Kategorie",
        "en": "Category collection",
        "es": "Colección destacada",
        "fi": "Esittelyssä oleva kokoelma",
        "fr": "Collection en vedette",
        "hi": "फ़ीचर्ड कलेक्शन",
        "it": "Collezione in evidenza",
        "ja": "特集コレクション",
        "ko": "추천 컬렉션",
        "nb": "Utvalgt samling",
        "nl": "Uitgelichte collectie",
        "pt-BR": "Coleção em destaque",
        "pt-PT": "Coleção em destaque",
        "sv": "Utvald kollektion",
        "th": "คอลเลกชันแนะนำ",
        "zh-CN": "特色产品系列",
        "zh-TW": "精選商品系列"
      },
      "category": {
        "da": "Kollektion",
        "de": "Kategorie",
        "en": "Collection",
        "es": "Colección",
        "fi": "Kokoelma",
        "fr": "Collection",
        "hi": "कलेक्शन",
        "it": "Collezione",
        "ja": "コレクション",
        "ko": "컬렉션",
        "nb": "Samling",
        "nl": "Collectie",
        "pt-BR": "Coleção",
        "pt-PT": "Coleção",
        "sv": "Produktserie",
        "th": "คอลเลกชัน",
        "zh-CN": "收藏",
        "zh-TW": "商品系列"
      }
    }
    
    
  ]
}
{% endschema %}




<script type="text/javascript">

$(document).ready(function () {
    var currentHeight = 0;
    $(window).load(function() {

        banner_height();

    });
    document.addEventListener("shopify:section:load", function(event) {
       banner_height();
    });
});

function banner_height(){
    currentHeight = $('ul.grid.grid--uniform.grid--view-items').outerHeight();
    console.log("set current height on load = " + currentHeight)
    $('.side-banner').css('height', currentHeight);

}

</script>```

Answer

your problem is the padding in the image. To be more specific, this css:

@media (max-width: 991px) {
  .grid2-in > div img {
    display: block;
    max-width: 400px;
    margin: 0 auto;
    padding: 30px 0;
    width: 100%;
  }
}

Remove the padding and it will fix your problem, however it may affect the images somewhere else… check closely the web after adding:

 @media (max-width: 991px) {
   .grid2-in > div img {
      padding: 0;
    }
  }

Leave a Reply

Your email address will not be published. Required fields are marked *