Icon Section Prestige Theme - nicht mittig

[it-ger]

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 %}

[Gabe]

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. 😉