Text wrong on z-axis

Topic summary

Issue: A Trusted Shops (etrusted) review panel, when enlarged, appears behind surrounding text instead of overlaying above it. The poster notes the underlying text’s z-index is already 0 and seeks guidance to make the review display on top.

Context/details provided:

  • Screenshot attached showing the overlap behavior (image is illustrative but not essential).
  • Shopify section code shared (HTML/CSS) for a logo list, including classes like .centered, .hovereffect (uses transform: scale on hover), and grid markup. Reviews come from the default etrusted-integration app.

Requests from responders:

  • Multiple requests for the store URL to inspect live behavior.

Latest update:

  • The store isn’t live, but a Shopify preview link was provided for troubleshooting.

Status/outcome:

  • No fix or concrete recommendation yet; helpers will review the preview link. The key unresolved question is how to adjust layering (z-index/stacking) so the expanded review panel overlays other content. Discussion remains open.
Summarized with AI on December 19. AI used: gpt-5.

I recently added a trustedshops review-panel to a shop, but when I enlarge the reviews, they are put behind regular text. How would one go about making the review go over the text below? (z-index of lower text is already 0)

Thank you in advance for any help!

1 Like

Hi @cMT , kindly share your store URL please.

Hi @cMT , Can you kindly share your store link with us? We will check it and suggest you a solution if possible.

It is not live, but I can share the code:

<style>
 .centered {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
 }
 .hovereffect:hover{
  transform: scale(1.07);
 }
</style>

<div class="logo_bar multicolumn color-{{ section.settings.color_scheme }} gradient{% unless section.settings.background_style == 'none' and settings.text_boxes_border_thickness > 0 or settings.text_boxes_shadow_opacity > 0 %} background-{{ section.settings.background_style }}{% endunless %}{% if section.settings.title == blank %} no-heading{% endif %}">

<div class="centered page-width section-{{ section.id }}-padding isolate{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{% if settings.animations_reveal_on_scroll %}
  data-cascade
{% endif %}>
{% if section.settings.title != blank %}
  <div class="centered title-wrapper-with-link title-wrapper--self-padded-mobile title-wrapper--no-top-margin multicolumn__title">
  <h2>{{ section.settings.title | escape }}</h2>
</div>
{% endif %}

<div>
  {% if section.blocks.size > 0 %}
  <ul class="multicolumn-list contains-content-container grid grid--{{ section.settings.columns_mobile }}-col-tablet-down grid--{{ section.settings.columns_desktop }}-col-desktop{% if show_mobile_slider %} slider slider--tablet grid--peek{% endif %}"
  id="Slider-{{ section.id }}"
  role="list">
  {% for block in section.blocks %}
    <li class="logo-bar__item{% if section.settings.title_enable %} logo-bar__item--large{% endif %} {% if block.settings.link != blank %}hovereffect{% endif %}" {{ block.shopify_attributes }}>
    {% if block.settings.link != blank %}
      <a href="{{ block.settings.link }}" class="logo-bar__link">
    {% endif %}
    {% if block.settings.image != blank %}
      {{ block.settings.image | image_url: height: section.settings.logo_size | image_tag: height: section.settings.logo_size}}
    {% else %}
      {{ 'logo' | placeholder_svg_tag: 'image'}}
    {% endif %}
    {% if block.settings.link != blank %}
      </a>
    {% endif %}
    </li>
  {% endfor %}
  </ul>
  {% endif %}
</div>
</div>

</div>

{% schema %}
{
"name": "Logo-Liste",
"class": "index-section",
"max_blocks": 20,
"settings": [
{
"type": "text",
"id": "title",
"label": "Titel",
"default": "Logo-Liste"
},
{
"type": "range",
"id": "logo_size",
"min": 10,
"max": 500,
"step": 5,
"unit": "px",
"label": "Logo-Größe",
"default": 10
}
],
"blocks": [
{
"type": "logo_image",
"name": "Logo",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Foto"
},
{
"type": "url",
"id": "link",
"label": "Link",
"info": "Optional"
}
]
}
],
"presets": [
{
"name": "Logo-Liste",
"category": "Foto",
"blocks": [
{
"type": "logo_image"
},
{
"type": "logo_image"
},
{
"type": "logo_image"
},
{
"type": "logo_image"
}
]
}
]
}
{% endschema %}

The reviews are provided by the default etrusted-integration app.

Check the reply I sent to Websensepro!

1 Like

@cMT , Can you kindly share link preview?

https://4hn99kbi19j73frr-29085761595.shopifypreview.com