FROM CACHE - de_header

Icon Section Prestige Theme - nicht mittig

it-ger
Forscher
48 0 14

Moin, 

 

ich habe den  folgenden Liquid-Code eingefügt. Auf der Anpassungsseite ist soweit alles in Ordnung. 

Leider wird die Section auf dem Desktop nicht mittig angezeigt, auf dem Handy allerdings schon.

Es gibt leider vom Prestige Theme keine eigene Logo oder Icon-Section, deswegen probiere ich es mit dieser.

Eine App will ich aufgrund der Performance ungerne verwenden.

Kann jemand helfen? 🙂 

 

Code:

 

<style>
@media only screen and (max-width: 767px) {
.icon-list-section .icon-list-item {
width: 50%;
float: left;
}
}

@media only screen and (min-width: 768px) {
.icon-list-section {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}

.icon-list-section .icon-list-item {
flex: 1 1 150px;
margin: 0 15px;
}
}

.logo-bar-section {
max-width: {{ section.settings.logo_width }};
display: inline-block;
margin: 0 27.5px 35px;
text-align: center;
}

.logo-bar-section p {
margin-top: 10px;
}
</style>

<div>
<h2>{{ section.settings.title | escape }}</h2>
{% if section.blocks.size > 0 %}
<ul>
{% for block in section.blocks %}
<li class="logo-bar-section" {{ block.shopify_attributes }}>
{% if block.settings.link != blank %}
<a href="{{ block.settings.link }}">
{% endif %}
{% if block.settings.image != blank %}
{{ block.settings.image | img_url: '150x150', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image' }}
{% else %}
{{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% if block.settings.link != blank %}
</a>
{% endif %}
{% if block.settings.text != blank %}
<p>{{ block.settings.text }}</p>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</div>

{% schema %}
{
"name": "Logo list",
"class": "index-section",
"max_blocks": 10,
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Logo list"
},
{
"type": "select",
"id": "logo_width",
"label": "Logo width",
"default": "150px",
"options": [
{
"label": "Extra Small",
"value": "100px"
},
{
"label": "Small",
"value": "125px"
},
{
"label": "Medium",
"value": "150px"
},
{
"label": "Large",
"value": "175px"
},
{
"label": "Extra Large",
"value": "200px"
}
]
}
],
"blocks": [
{
"type": "logo_image",
"name": "Logo",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "url",
"id": "link",
"label": "Link",
"info": "Optional"
},
{
"type": "text",
"id": "text",
"label": "Text",
"default": "Logo Text"
}
]
}
],
"presets": [
{
"name": "Logo list",
"category": "Image",
"blocks": [
{
"type": "logo_image"
},
{
"type": "logo_image"
},
{
"type": "logo_image"
},
{
"type": "logo_image"
}
]
}
]
}
{% endschema %}

1 ANTWORT 1

Gabe
Shopify Staff
16874 2676 3948

Hey @it-ger 

 

Es ist schwer zu sagen wo da der Wurm liegt ohne eine Runtime Environment wo man dein Code in deinem Sandbox Theme testen kann. 


Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

 

Es kann sein dass der von dir bereitgestellte Code einige Anpassungen braucht so dass die Logos sowohl auf dem Desktop als auch auf dem Mobilgerät mittig ausgerichtet werden. Hier ein Beispielcode den du testen kannst:

 

<style>
.icon-list-section .icon-list-item {
  width: 50%;
  float: left;
}

@media only screen and (min-width: 768px) {
  .logo-list-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  .logo-list-section .logo-bar-section {
    flex: 1 1 150px;
    margin: 0 15px;
  }
}

.logo-bar-section {
  max-width: {{ section.settings.logo_width }};
  display: inline-block;
  margin: 0 27.5px 35px;
  text-align: center;
}

.logo-bar-section p {
  margin-top: 10px;
}
</style>

<div class="logo-list-section">
  <h2>{{ section.settings.title | escape }}</h2>
  {% if section.blocks.size > 0 %}
  <ul style="list-style: none; padding: 0;">
    {% for block in section.blocks %}
    <li class="logo-bar-section" {{ block.shopify_attributes }}>
      {% if block.settings.link != blank %}
      <a href="{{ block.settings.link }}">
      {% endif %}
      {% if block.settings.image != blank %}
      {{ block.settings.image | img_url: '150x150', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image' }}
      {% else %}
      {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
      {% endif %}
      {% if block.settings.link != blank %}
      </a>
      {% endif %}
      {% if block.settings.text != blank %}
      <p>{{ block.settings.text }}</p>
      {% endif %}
    </li>
    {% endfor %}
  </ul>
  {% endif %}
</div>

 

Die wichtigsten Änderungen sind:

  1. Hinzufügen einer umschließenden Div mit der Klasse "logo-list-section" für die gesamte Logoliste.
  2. Ändern der CSS-Klasse von .icon-list-section zu .logo-list-section.
  3. Entfernen des überflüssigen Media-Query für Mobilgeräte, da das Logo auf Mobilgeräten bereits zentriert ist.
  4. Hinzufügen von style="list-style: none; padding: 0;" zum <ul>-Element, um die Listenelemente korrekt zu formatieren.

Bei weiteren Fragen kann ich gerne einen Experten empfehlen der dein Code in deiner Environment testen kann. 😉

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog