FROM CACHE - de_header
Diese Community hat auf Peer-to-Peer-Support umgestellt. Der Shopify Support wird diese Community nicht mehr betreuen. Wir empfehlen dir, dich mit anderen Händler:innen und Partner:innen in Verbindung zu setzen, um Unterstützung zu erhalten und Erfahrungen auszutauschen. Bitte melde weiterhin alles, was gegen unseren Verhaltenskodex verstößt, oder Inhalte, die deiner Meinung nach entfernt werden sollten.

Custom Content on Mobile View is not centered

Custom Content on Mobile View is not centered

InfinityStars
Besucher
2 0 0

Hello Shopify-Community,

 

the custom-content section of our store is not centered on mobile view.

It has more left-margin than right-margin.

However, the CSS-code is on margin-left/right=0, padding-left/right=0. Even making the margin/padding = auto does not work. 

Please help, in order to center-align the section on mobile.

 

Thank you in advance!

 

 

0A811ADC-275A-486D-89A1-4B4A507C330A.JPG

 

2 ANTWORTEN 2

Michael_Singer
Shopify Partner
106 16 64

@InfinityStars 

Did you check the <p> // <div> sections? Maybe there is the reason

InfinityStars
Besucher
2 0 0

I checked everything, unfortunately I did not found anything...

 

Maybe you find something in the code below, or have any other solutions.

 

 

<div class="page-width" >
{% if section.settings.title != blank %}
<div class="section-header text-center">
<h4 class="h2">{{ section.settings.title | escape }}</h4>
</div>
{% endif %}

<div class="custom-content" >
{% for block in section.blocks %}
{% case block.settings.width %}
{% when '25%' %}
{%- assign max_height = 250 -%}
{%- assign block_width = 'small--one-half medium-up--one-quarter' -%}
{% when '33%' %}
{%- assign max_height = 345 -%}
{%- assign block_width = 'small--one-half medium-up--one-third' -%}
{% when '50%' %}
{%- assign max_height = 530 -%}
{%- assign block_width = 'small--one-half medium-up--one-half' -%}
{% when '66%' %}
{%- assign max_height = 720 -%}
{%- assign block_width = 'two-thirds' -%}
{% when '75%' %}
{%- assign max_height = 810 -%}
{%- assign block_width = 'three-quarters' -%}
{% when '100%' %}
{%- assign max_height = 1090 -%}
{%- assign block_width = 'one-whole' -%}
{% endcase %}

{% if block.type == 'image' %}
{% capture img_id %}CustomImage--{{ forloop.index }}-{{ block.settings.image.id }}{% endcapture %}
{% capture img_wrapper_id %}CustomImageWrapper--{{ forloop.index }}-{{ block.settings.image.id }}{% endcapture %}

{% unless block.settings.image == blank %}
{% include 'image-style', image: block.settings.image, height: max_height, wrapper_id: img_wrapper_id, img_id: img_id %}
{% endunless %}
{% endif %}

<div class="custom__item custom__item--{{ block.type }} custom__item--{{ block.id }} {{ block_width }} {% if block.settings.alignment %} align--{{ block.settings.alignment }} {% endif %}" {{ block.shopify_attributes }}>
<div class="custom__item-inner custom__item-inner--{{ block.type }}"{% if block.type == 'image' %} id="{{ img_wrapper_id }}"{% endif %}>
{% case block.type %}
{% when 'image' %}
{% if block.settings.image != blank %}
{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<div style="padding-top:{{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100}}%;">
<img id="{{ img_id }}"
class="custom__image lazyload js"
src="{{ block.settings.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
alt="{{ block.settings.image.alt | escape }}">
</div>
<noscript>
{% capture image_size %}{{ max_height }}x{% endcapture %}
{{ block.settings.image | img_url: image_size, scale: 2, crop: 'top' | img_tag: block.settings.image.alt, 'custom__image' }}
</noscript>
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% when 'text' %}
<div class="medium-up--text-{{ block.settings.align_text }}">
{% if block.settings.title != blank %}
<h4 class="h3">{{ block.settings.title | escape }}</h4>
{% endif %}
{% if block.settings.text != blank %}
<div class="rte-setting rte">{{ block.settings.text }}</div>
{% endif %}
</div>
{% when 'video' %}
<div class="video-wrapper">
{% if block.settings.video_url == blank %}
<iframe src="//www.youtube.com/embed/_9VUPq3SxOc?rel=0&showinfo=0&vq=720" width="850" height="480" frameborder="0" allowfullscreen></iframe>
{% else %}
{% if block.settings.video_url.type == "youtube" %}
<iframe src="//www.youtube.com/embed/{{ block.settings.video_url.id }}?rel=0&showinfo=0&vq=720" width="850" height="480" frameborder="0" allowfullscreen></iframe>
{% endif %}
{% if block.settings.video_url.type == "vimeo" %}
<iframe src="//player.vimeo.com/video/{{ block.settings.video_url.id }}?byline=0&portrait=0&badge=0" width="850" height="480" frameborder="0" allowfullscreen></iframe>
{% endif %}
{% endif %}
</div>
{% when 'product' %}
{%- assign product = all_products[block.settings.product] -%}
{% if product.title.size > 0 %}
{% include 'product-card-grid', max_height: max_height, product: product %}
{% else %}
{% comment %}
No product yet. Show onboarding one.
{% endcomment %}
<div class="grid-view-item">
<a class="grid-view-item__link" href="#">
<div class="grid-view-item__image">
{% 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">{{ 'homepage.onboarding.product_title' | t }}</div>
<div class="grid-view-item__meta">
{{ 1999 | money }}
</div>
</a>
</div>
{% endif %}
{% when 'collection' %}
{%- assign collection = collections[block.settings.collection] -%}
{% include 'collection-grid-item', collection: collection %}
{% when 'html' %}
{% if block.settings.code != blank %}
{{ block.settings.code }}
{% endif %}
{%- when 'link_list' -%}
{%- assign custom_linklist = block.settings.menu -%}
<ul class="list--inline custom__linklist">
{%- for link in linklists[custom_linklist].links -%}
<li class="custom__linklist-item">
<a href="{{ link.url }}" class="custom__linklist-link">
{{ link.title | escape }}
</a>
</li>
{%- endfor -%}
</ul>
{% endcase %}
</div>
</div>

{% endfor %}
</div>

{% if section.blocks.size == 0 %}
{% include 'no-blocks' %}
{% endif %}
</div>

 

{% schema %}