Custom Content for Debut Theme forces text to the left on mobile

Tyler_Flowers
New Member
2 0 0

Hi all,

I'm running the Debut theme and have added a custom content section to my homepage for displaying an image with text to it's right. The image uses 33% while the text uses 66% of the page width and is centered in this space. It works great for desktop, but when viewed on mobile the text is changed to left justified and does not take up the entire screen width. It's also below the image, but that part is fine and expected.

How can I fix the text not be centered and taking up the screen width on mobile?

Store is here: https://goo.gl/Jou8Fg

Code for the Section is below:

<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' with image: block.settings.image, small_style: false, width: max_height, height: max_height, wrapper_id: img_wrapper_id, img_id: img_id %}
        {% endunless %}
      {% endif %}

      <div class="custom__item 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">{{ 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 %}
              {% 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' %}
            {% when 'html' %}
              {% if block.settings.code != blank %}
                {{ block.settings.code }}
              {% endif %}
          {% endcase %}
        </div>
      </div>

    {% endfor %}
  </div>

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

{% schema %}
  {
    "name": "Custom content",
    "class": "index-section",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Custom content"
      }
    ],
    "blocks": [
      {
        "type": "text",
        "name": "Text",
        "settings": [
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Talk about your brand"
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
          },
          {
            "type": "select",
            "id": "width",
            "label": "Container width",
            "default": "50%",
            "options": [
              {
                "value": "25%",
                "label": "25%"
              },
              {
                "value": "33%",
                "label": "33%"
              },
              {
                "value": "50%",
                "label": "50%"
              },
              {
                "value": "66%",
                "label": "66%"
              },
              {
                "value": "75%",
                "label": "75%"
              },
              {
                "value": "100%",
                "label": "100%"
              }
            ]
          },
          {
            "type": "select",
            "id": "alignment",
            "label": "Vertical alignment",
            "default": "center",
            "options": [
              {"value": "top-middle", "label": "Top"},
              {"value": "center", "label": "Middle"},
              {"value": "bottom-middle", "label": "Bottom"}
            ]
          },
          {
            "type": "select",
            "id": "align_text",
            "label": "Horizontal alignment",
            "default": "left",
            "options": [
              {"value": "left", "label": "Left"},
              {"value": "center", "label": "Centered"},
              {"value": "right", "label": "Right"}
            ]
          }
        ]
      },
      {
        "type": "image",
        "name": "Image",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "select",
            "id": "width",
            "label": "Container width",
            "default": "50%",
            "options": [
              {
                "value": "25%",
                "label": "25%"
              },
              {
                "value": "33%",
                "label": "33%"
              },
              {
                "value": "50%",
                "label": "50%"
              },
              {
                "value": "66%",
                "label": "66%"
              },
              {
                "value": "75%",
                "label": "75%"
              },
              {
                "value": "100%",
                "label": "100%"
              }
            ]
          },
          {
            "type": "select",
            "id": "alignment",
            "label": "Vertical alignment",
            "default": "center",
            "options": [
              {
                "value": "top-left",
                "label": "Top left"
              },
              {
                "value": "top-middle",
                "label": "Top middle"
              },
              {
                "value": "top-right",
                "label": "Top right"
              },
              {
                "value": "middle-left",
                "label": "Middle left"
              },
              {
                "value": "center",
                "label": "Middle"
              },
              {
                "value": "middle-right",
                "label": "Middle right"
              },
              {
                "value": "bottom-left",
                "label": "Bottom left"
              },
              {
                "value": "bottom-middle",
                "label": "Bottom middle"
              },
              {
                "value": "bottom-right",
                "label": "Bottom right"
              }
            ]
          }
        ]
      },
      {
        "type": "video",
        "name": "Video",
        "settings": [
          {
            "type": "video_url",
            "id": "video_url",
            "label": "YouTube or Vimeo link",
            "accept": ["youtube", "vimeo"]
          },
          {
            "type": "select",
            "id": "width",
            "label": "Container width",
            "default": "100%",
            "options": [
              {
                "value": "25%",
                "label": "25%"
              },
              {
                "value": "33%",
                "label": "33%"
              },
              {
                "value": "50%",
                "label": "50%"
              },
              {
                "value": "66%",
                "label": "66%"
              },
              {
                "value": "75%",
                "label": "75%"
              },
              {
                "value": "100%",
                "label": "100%"
              }
            ]
          },
          {
            "type": "select",
            "id": "alignment",
            "label": "Vertical alignment",
            "default": "top-middle",
            "options": [
              {
                "value": "top-middle",
                "label": "Top"
              },
              {
                "value": "center",
                "label": "Middle"
              },
              {
                "value": "bottom-middle",
                "label": "Bottom"
              }
            ]
          }
        ]
      },
      {
        "type": "product",
        "name": "Product",
        "settings": [
          {
            "type": "product",
            "id": "product",
            "label": "Product"
          },
          {
            "type": "select",
            "id": "width",
            "label": "Container width",
            "default": "50%",
            "options": [
              {
                "value": "25%",
                "label": "25%"
              },
              {
                "value": "33%",
                "label": "33%"
              },
              {
                "value": "50%",
                "label": "50%"
              },
              {
                "value": "66%",
                "label": "66%"
              },
              {
                "value": "75%",
                "label": "75%"
              },
              {
                "value": "100%",
                "label": "100%"
              }
            ]
          },
          {
            "type": "select",
            "id": "alignment",
            "label": "Vertical alignment",
            "default": "center",
            "options": [
              {
                "value": "top-left",
                "label": "Top left"
              },
              {
                "value": "top-middle",
                "label": "Top middle"
              },
              {
                "value": "top-right",
                "label": "Top right"
              },
              {
                "value": "middle-left",
                "label": "Middle left"
              },
              {
                "value": "center",
                "label": "Middle"
              },
              {
                "value": "middle-right",
                "label": "Middle right"
              },
              {
                "value": "bottom-left",
                "label": "Bottom left"
              },
              {
                "value": "bottom-middle",
                "label": "Bottom middle"
              },
              {
                "value": "bottom-right",
                "label": "Bottom right"
              }
            ]
          }
        ]
      },
      {
        "type": "collection",
        "name": "Collection",
        "settings": [
          {
            "type": "collection",
            "id": "collection",
            "label": "Collection"
          },
          {
            "type": "select",
            "id": "width",
            "label": "Container width",
            "default": "50%",
            "options": [
              {
                "value": "25%",
                "label": "25%"
              },
              {
                "value": "33%",
                "label": "33%"
              },
              {
                "value": "50%",
                "label": "50%"
              },
              {
                "value": "66%",
                "label": "66%"
              },
              {
                "value": "75%",
                "label": "75%"
              },
              {
                "value": "100%",
                "label": "100%"
              }
            ]
          }
        ]
      },
      {
        "type": "html",
        "name": "Custom HTML",
        "settings": [
          {
            "type": "html",
            "id": "code",
            "label": "HTML"
          },
          {
            "type": "select",
            "id": "width",
            "label": "Container width",
            "default": "50%",
            "options": [
              {
                "value": "25%",
                "label": "25%"
              },
              {
                "value": "33%",
                "label": "33%"
              },
              {
                "value": "50%",
                "label": "50%"
              },
              {
                "value": "66%",
                "label": "66%"
              },
              {
                "value": "75%",
                "label": "75%"
              },
              {
                "value": "100%",
                "label": "100%"
              }
            ]
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Custom content",
        "category": "Advanced layout",
        "blocks": [
          {
            "type": "text"
          },
          {
            "type": "image"
          }
        ]
      }
    ]
  }
{% endschema %}

 

0 Likes
Lixon_Louis
Shopify Partner
1175 34 232

Hi Tyler, if this is your expected result > http://take.ms/2DD9v 

Update the highlighted text to 'medium-up--two-thirds'  > http://take.ms/mjIfB 

Available for hiring. Reach me at lixon@ecommercestudio.in
0 Likes
MikeBee
Tourist
7 1 1

Still got the error at line 36 when running the script

 

0 Likes