Theme für Smartphone anpassen

[LoganDeLaCruz]

Hey Leute,

ich konnte leider keinen passenden Thread finden, deswegen entschuldigt bitte, falls die Frage hier schonmal gestellt wurde. Ich hatte diese Frage auch bereits im Technische Fragen & Antworten - Forum gestellt, aber dort wurde der Thread als Spam deklariert, ich denke weil er hier besser aufgehoben ist. 😄 

Ich habe das Problem, dass sowohl der Highlights-Banner, als auch die Featured Collections auf dem Smartphone abgeschnitten und dadurch hinderlich zu bedienen sind. Meine Frage ist nun, ob man es über den Code so einstellen kann, dass sich beides an den kleineren Smartphone Bildschirm anpasst?

Es geht wirklich nur um den Highlights Banner und die Featured Collection, alles andere wird einwandfrei angezeigt.

In Benutzung ist eine ältere Version des Empire Themes und ich hoffe, dass mir jemand weiterhelfen kann. Nachfolgend noch die Codes für die Featured Collection:

Spoiler

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

{% assign product_limit = 4 %}
{% assign products = collection.products %}
{% assign onboarding = false %}

<script
  type="application/json"
  data-section-id="{{ section.id }}"
  data-section-type="dynamic-featured-collection">
</script>

<section class="product-row--container featured-collection--container">
  {% if section.settings.title != blank %}
    <h1 class="home-section--title">
      {{ section.settings.title | escape }}
    </h1>
  {% endif %}

  <div class="home-section--content product-row" data-product-row>
    {% for product in products limit: product_limit %}
      {%
        include 'product-grid-item',
        product: product
      %}
    {% else %}
      {% for i in (1..product_limit) %}
        {% capture current %}{% cycle 1, 2, 3, 4 %}{% endcapture %}

        {%- capture placeholder_image -%}
          {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder--image' }}
        {%- endcapture -%}

        {%
          include 'product-grid-item',
          product: false
        %}
      {% endfor %}
    {% endfor %}

    <div
      class="
        productgrid--item
        featured-collection--banner
      "
      {% if section.settings.banner_image %}
        {%
          include 'rimg',
          img: section.settings.banner_image
          size: '500x750',
          crop: 'center',
          background: true,
          lazy: true
        %}
      {% endif %}
    >
      {% if section.settings.banner_image %}
        {%
          include 'rimg',
          img: section.settings.banner_image
          size: '500x750',
          crop: 'center',
          canvas: true,
          lazy: true
        %}
      {% endif %}

      <a class="featured-collection--banner-outer" href="{% if collection.url != blank %}{{ collection.url }}{% else %}#{% endif %}">
        <div class="featured-collection--banner-inner">
          <span class="featured-collection--banner-subtitle">
            {{ 'onboarding.featured_collection.subtitle' | t }}
          </span>

          <h2 class="featured-collection--banner-title">
            {% unless onboarding %}
              {{ collection.title | escape }}
            {% else %}
              {{ 'onboarding.featured_collection.title' | t }}
            {% endunless %}
          </h2>
        </div>
      </a>
    </div>

  </div>
</section>

<style>
  #shopify-section-{{section.id}} .featured-collection--banner {
    color: {{ section.settings.banner_color }};

    {% unless section.settings.banner_image %}
      background-color: {{ settings.color_links }};
    {% endunless %}
  }
</style>

{% schema %}
{
  "name": "Featured collection",
  "class": "featured-collection--section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Featured collection"
    },
    {
      "id": "collection",
      "type": "collection",
      "label": "Collection"
    },
    {
      "type": "header",
      "content": "Call to action"
    },
    {
      "type": "color",
      "id": "banner_color",
      "label": "Text color",
      "default": "#ffffff"
    },
    {
      "id": "banner_image",
      "type": "image_picker",
      "label": "Image",
      "info": "500 x 750px .jpg recommended"
    }
  ],
  "presets": [
    {
      "name": "Featured collection",
      "category": "Collection"
    }
  ]
}

{% endschema %}

Sowie den Highlight Banner:

Spoiler

<script
  type="application/json"
  data-section-type="static-highlights-banners"
  data-section-id="{{ section.id }}">
</script>

{% if section.settings.show_highlights_banner and section.blocks.size > 0 %}
  <style>
    .highlights-banners-container {
      background-color: {{ section.settings.background_color }};
    }

    .highlights-banners:before {
      background: linear-gradient( to right, {{ section.settings.background_color }} 10%, {{ section.settings.background_color | color_modify: 'alpha', 0 }} 100%);
    }

    .highlights-banners:after {
      background: linear-gradient( to left, {{ section.settings.background_color }} 10%, {{ section.settings.background_color | color_modify: 'alpha', 0 }} 100%);
    }

    .highlights-banners-block {
      color: {{ section.settings.color }};
    }

    .highlights-banners-icon {
      color: {{ section.settings.icon_color }};
    }
  </style>

  <div class="highlights-banners-container">
    <div class="highlights-banners highlight-banners-count-{{ section.blocks.size }}">
      {% for block in section.blocks %}
        {% if block.settings.text != blank or block.settings.title != blank %}
          {% if block.settings.link != blank %}
            <a
              class="highlights-banners-block"
              href="{{ block.settings.link }}"
              {{ block.shopify_attributes }}
            >
          {% else %}
            <div
              class="highlights-banners-block"
              {{ block.shopify_attributes }}
            >
          {% endif %}
            {% if block.settings.icon != 'none' or block.settings.image != blank %}
              <div class="highlights-banners-icon">
                {% if block.settings.image != blank %}
                  {%
                    include 'rimg',
                    class: 'highlights-banners-custom-icon',
                    img: block.settings.image,
                    size: '46x'
                  %}
                {% else %}
                  {% include 'icon-library', id: block.settings.icon %}
                {% endif %}
              </div>
            {% endif %}

            <div class="highlights-banners-text">
              {% if block.settings.title != blank %}
                <h4 class="highlights-banners-heading">
                  {{ block.settings.title | escape }}
                </h4>
              {% endif %}

              {% if block.settings.text != blank %}
                {{ block.settings.text | escape }}
              {% endif %}
            </div>
          {% if block.settings.link != blank %}
            </a>
          {% else %}
            </div>
          {% endif %}
        {% endif %}
      {% endfor %}
    </div>
  </div>
{% endif %}

{% schema %}
{
  "name": "Highlights banner",
  "class": "highlights-banners--section",
  "settings": [
    {
      "id": "show_highlights_banner",
      "type": "checkbox",
      "label": "Enable highlights banner",
      "default": true
    },
    {
      "id": "color",
      "type": "color",
      "label": "Text color",
      "default": "#4d4d4d"
    },
    {
      "id": "icon_color",
      "type": "color",
      "label": "Icon color",
      "default": "#4d4d4d"
    },
    {
      "id": "background_color",
      "type": "color",
      "label": "Background color",
      "default": "#f8f8f8"
    }
  ],
  "blocks": [
    {
      "type": "highlight",
      "name": "Highlight",
      "settings": [
        {
          "id": "icon",
          "type": "select",
          "label": "Icon",
          "options": [
            {
              "value": "none",
              "label": "No icon"
            },
            {
              "value": "icon-cell-phone",
              "label": "Cell phone"
            },
            {
              "value": "icon-chat",
              "label": "Chat"
            },
            {
              "value": "icon-chat-alternate",
              "label": "Chat alternate"
            },
            {
              "value": "icon-chat-solid",
              "label": "Chat solid"
            },
            {
              "value": "icon-credit-card",
              "label": "Credit card"
            },
            {
              "value": "icon-delivery",
              "label": "Delivery"
            },
            {
              "value": "icon-email",
              "label": "Email"
            },
            {
              "value": "icon-envelope",
              "label": "Envelope"
            },
            {
              "value": "icon-gift-card",
              "label": "Gift card"
            },
            {
              "value": "icon-heart",
              "label": "Heart"
            },
            {
              "value": "icon-label-tag",
              "label": "Label tag"
            },
            {
              "value": "icon-lock-alternate",
              "label": "Lock"
            },
            {
              "value": "icon-people",
              "label": "People"
            },
            {
              "value": "icon-people-alternate",
              "label": "People alternate"
            },
            {
              "value": "icon-pin",
              "label": "Pin"
            },
            {
              "value": "icon-pin-solid",
              "label": "Pin solid"
            },
            {
              "value": "icon-question-mark",
              "label": "Question mark"
            },
            {
              "value": "icon-smile",
              "label": "Smile"
            },
            {
              "value": "icon-store",
              "label": "Store"
            },
            {
              "value": "icon-transfer",
              "label": "Transfer"
            }
          ],
          "default": "none"
        },
        {
          "id": "image",
          "type": "image_picker",
          "label": "Image",
          "info": "50x50 recommended. Uploading an image will override any icon selected above."
        },
        {
          "id": "title",
          "type": "text",
          "label": "Heading"
        },
        {
          "id": "text",
          "type": "textarea",
          "label": "Text"
        },
        {
          "id": "link",
          "type": "url",
          "label": "Link"
        }
      ],
      "limit": 4
    }
  ],
  "default": {
    "blocks": [
      {
        "type": "highlight",
        "settings": {
          "icon": "icon-delivery",
          "title": "Free Shipping",
          "text": "When you spend $100+"
        }
      },
      {
        "type": "highlight",
        "settings": {
          "icon": "icon-cell-phone",
          "title": "Give Us A Call",
          "text": "+1 (201) 555-5555"
        }
      },
      {
        "type": "highlight",
        "settings": {
          "icon": "icon-chat-alternate",
          "title": "Chat With Us",
          "text": "We offer 24-hour chat support"
        }
      },
      {
        "type": "highlight",
        "settings": {
          "icon": "icon-pin",
          "title": "Locations",
          "text": "Find a store near you"
        }
      }
    ]
  }
}

{% endschema %}

Ich hoffe jemand Blickt da durch und ich bedanke mich im vorraus 🙂

[Gabe]

Hey @LoganDeLaCruz 

Ich habe deinen Beitrag jetzt "ungespammt". Ggf. lag es am vielen Code, dass das System als potentiellen Spam eingestuft hat.

• Jetzt so ganz auf die Schnelle, siehe meinen Video hier.

VG,

[LoganDeLaCruz]

Hallo Gabe und vielen Dank fürs "entspammen" und das video! 🙂 Ich werde mich direkt zu den Kollegen im englischen Forum machen, danke Dir! 🙂

[Gabe]

@LoganDeLaCruz 

Poste deine Frage mit allen angaben auch in diesem Thread und tagge den Ketan direkt.

[LoganDeLaCruz]

Erledigt! Vielen Dank 🙂