We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Why is there a space between pictures and text on my mobile product page?

Why is there a space between pictures and text on my mobile product page?

AislingOd
Excursionist
17 0 5

Hi, My store has debute theme and when opening the product page on mobile only , there is an odd space between picture and text. I have attached a sample picture. Please if anyone can let me know how to fix this. Thanks 

 

0d895077-86d3-4a64-85ef-35e485a69dc6.jpg

 

https://huginabox.ie/products/luxury-lemon-balm-candle?pr_prod_strat=copurchase&pr_rec_id=e1911208a&...

Replies 7 (7)

diego_ezfy
Shopify Partner
2988 573 931

@AislingOd, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:

[id*='ImageZoom']{
	height: auto !important;
}


As an addendum, you'd also may want to add arrows/swiping to the product page images, there is a tutorial covering it here.

I hope it helps.

Kind regards,
Diego

Search for text across all files in your Shopify theme
◦ Proudly top #5 Shopify Expert of all time - Book a call with me here.
AislingOd
Excursionist
17 0 5

@diego_ezfy I did copied the text to its location. But it is still the same. The mobile version of the product still has space in it.

diego_ezfy
Shopify Partner
2988 573 931

@AislingOd, do this instead

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:


<style>
[id*='ImageZoom']{
	height: auto !important;
}
</style>
<script>

</script>

 

 



Kind regards,
Diego

 

Search for text across all files in your Shopify theme
◦ Proudly top #5 Shopify Expert of all time - Book a call with me here.
AislingOd
Excursionist
17 0 5

@diego_ezfy Nope that wont work either. Sorry - 

diego_ezfy
Shopify Partner
2988 573 931

@AislingOd 

I'm checking the website now and the code is not being added. You may be forgetting to save the file or adding it to the wrong theme.

diego_ezfy_0-1655083993830.png

 

Search for text across all files in your Shopify theme
◦ Proudly top #5 Shopify Expert of all time - Book a call with me here.
AislingOd
Excursionist
17 0 5

Thanks for your reply. I never found the </body> code. Can you please check below code in theme.liquid : 

 

<style>
@media only screen and (min-width: 750px){
.main-content {
    padding-top: 0px !important;
}

.main-content {
   padding-top: 0px !important;
}

@media only screen and (min-width: 750px){
.index-section {
    padding-top: 0px !important;
}

.index-section {
   padding-top: 0px !important;
}

</style><!doctype html>
<html class="no-js" lang="{{ request.locale.iso_code }}">
<head>{% include 'best-option-initializer' %}
{% render 'pagefly-head' %}
  <!-- Global site tag (gtag.js) - Google Ads -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-1038919675"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'AW-1038919675');
</script>
  <!-- google dynamic remarketing tag for theme.liquid -->
{% if template contains 'product' %}
<script type="text/javascript">
  var json_product = {{ product | json }};
</script>
<script>
  var ecomm_prodid=[];
  for(var i=0;i<json_product.variants.length;i++)
    ecomm_prodid.push('shopify_US_{{product.id}}_'+json_product.variants[i].id);
</script>
<script type="text/javascript">
  var google_tag_params = {
    ecomm_prodid: ecomm_prodid,
    ecomm_pagetype: 'product',
    ecomm_totalvalue: parseFloat('{{ product.price | money_without_currency | remove: ","}}')
  };
</script>
{% elsif template contains 'collection' %}
<script type="text/javascript">
  var google_tag_params = {
    ecomm_pagetype: 'category'
  };
</script>
{% elsif template contains 'cart' %}
<script type="text/javascript">
  var id = new Array();
  {% for item in cart.items %}
  id.push('shopify_US_{{item.product.id}}_{{item.variant.id}}');
   {% endfor %}

   var google_tag_params = {
     ecomm_prodid: id,
     ecomm_pagetype: 'cart',
     ecomm_totalvalue: parseFloat('{{ cart.total_price | money_without_currency | remove: ","}}')
   };
</script>
{% elsif template contains 'search' %}
<script type="text/javascript">
  var google_tag_params = {
    ecomm_pagetype: 'searchresults'
  };
</script>
{% elsif template contains 'index' %}
<script type="text/javascript">
  var google_tag_params = {
    ecomm_pagetype: 'home'
  };
</script>
{% else %}
<script type="text/javascript">
  var google_tag_params = {
    ecomm_pagetype: 'other'
  };
</script>
{% endif %}
<script>
  gtag('event', 'page_view', {'send_to': 'AW-1038919675',
                              'ecomm_prodid':window.google_tag_params.ecomm_prodid,
                              'ecomm_pagetype': window.google_tag_params.ecomm_pagetype,
                              'ecomm_totalvalue':window.google_tag_params.ecomm_totalvalue
                             });
</script>
 <meta name="google-site-verification=xKg79i6mCrJ_uzrPETbakEHPRwzyDVuMHHz7qBoRais"/>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="theme-color" content="{{ settings.color_button }}">
  
  <link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
  <link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
  <link rel="preconnect" href="https://monorail-edge.shopifysvc.com">

  {%- assign header_font = settings.type_header_font -%}
  {%- assign base_font = settings.type_base_font -%}
  {%- assign base_font_bolder = base_font | font_modify: 'weight', 'bolder' -%}
  {%- assign base_font_bold = base_font | font_modify: 'weight', 'bold' -%}
  {%- assign base_font_italic = base_font | font_modify: 'style', 'italic' -%}
  {%- assign base_font_bold_italic = base_font_bold | font_modify: 'style', 'italic' -%}

  <link rel="preload" as="font" href="{{ header_font | font_url }}" type="font/woff2" crossorigin>
  <link rel="preload" as="font" href="{{ base_font | font_url }}" type="font/woff2" crossorigin>
  <link rel="preload" as="font" href="{{ base_font_bold | font_url }}" type="font/woff2" crossorigin>
  <link rel="preload" href="{{ 'theme.js' | asset_url }}" as="script">
  <link rel="preload" href="{{ 'lazysizes.js' | asset_url }}" as="script">

  {%- if canonical_url != blank  -%}
    <link rel="canonical" href="{{ canonical_url }}">
  {%- endif -%}

  {%- if settings.favicon != blank -%}
    <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
  {%- endif -%}

  {%- capture seo_title -%}
    {%- if request.page_type == 'search' and search.performed == true -%}
      {{ 'general.search.heading' | t: count: search.results_count }}: {{ 'general.search.results_with_count' | t: terms: search.terms, count: search.results_count }}
    {%- else -%}
      {{ page_title }}
    {%- endif -%}
    {%- if current_tags -%}
      {%- assign meta_tags = current_tags | join: ', ' -%} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags -}}
    {%- endif -%}
    {%- if current_page != 1 -%}
      &ndash; {{ 'general.meta.page' | t: page: current_page }}
    {%- endif -%}
    {%- assign escaped_page_title = page_title | escape -%}
    {%- unless escaped_page_title contains shop.name -%}
      &ndash; {{ shop.name }}
    {%- endunless -%}
  {%- endcapture -%}
  <title>{{ seo_title | strip }}</title>

  {%- if page_description -%}
    <meta name="description" content="{{ page_description | escape }}">
  {%- endif -%}

  {% include 'social-meta-tags' %}
  {% include 'css-variables' %}

  <style>*,::after,::before{box-sizing:border-box}body{margin:0}body,html{background-color:var(--color-body)}body,button{font-size:calc(var(--font-size-base) * 1px);font-family:var(--font-stack-body);font-style:var(--font-style-body);font-weight:var(--font-weight-body);color:var(--color-text);line-height:1.5}body,button{-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}.border-bottom{border-bottom:1px solid var(--color-border)}.btn--link{background-color:transparent;border:0;margin:0;color:var(--color-text);text-align:left}.text-right{text-align:right}.icon{display:inline-block;width:20px;height:20px;vertical-align:middle;fill:currentColor}.icon__fallback-text,.visually-hidden{position:absolute!important;overflow:hidden;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;padding:0;border:0}svg.icon:not(.icon--full-color) circle,svg.icon:not(.icon--full-color) ellipse,svg.icon:not(.icon--full-color) g,svg.icon:not(.icon--full-color) line,svg.icon:not(.icon--full-color) path,svg.icon:not(.icon--full-color) polygon,svg.icon:not(.icon--full-color) polyline,svg.icon:not(.icon--full-color) rect,symbol.icon:not(.icon--full-color) circle,symbol.icon:not(.icon--full-color) ellipse,symbol.icon:not(.icon--full-color) g,symbol.icon:not(.icon--full-color) line,symbol.icon:not(.icon--full-color) path,symbol.icon:not(.icon--full-color) polygon,symbol.icon:not(.icon--full-color) polyline,symbol.icon:not(.icon--full-color) rect{fill:inherit;stroke:inherit}li{list-style:none}.list--inline{padding:0;margin:0}.list--inline>li{display:inline-block;margin-bottom:0;vertical-align:middle}a{color:var(--color-text);text-decoration:none}.h1,.h2,h1,h2{margin:0 0 17.5px;font-family:var(--font-stack-header);font-style:var(--font-style-header);font-weight:var(--font-weight-header);line-height:1.2;overflow-wrap:break-word;word-wrap:break-word}.h1 a,.h2 a,h1 a,h2 a{color:inherit;text-decoration:none;font-weight:inherit}.h1,h1{font-size:calc(((var(--font-h1-desktop))/ (var(--font-size-base))) * 1em);text-transform:none;letter-spacing:0}@media only screen and (max-width:749px){.h1,h1{font-size:calc(((var(--font-h1-mobile))/ (var(--font-size-base))) * 1em)}}.h2,h2{font-size:calc(((var(--font-h2-desktop))/ (var(--font-size-base))) * 1em);text-transform:uppercase;letter-spacing:.1em}@media only screen and (max-width:749px){.h2,h2{font-size:calc(((var(--font-h2-mobile))/ (var(--font-size-base))) * 1em)}}p{color:var(--color-body-text);margin:0 0 19.44444px}@media only screen and (max-width:749px){p{font-size:calc(((var(--font-size-base) - 1)/ (var(--font-size-base))) * 1em)}}p:last-child{margin-bottom:0}@media only screen and (max-width:749px){.small--hide{display:none!important}}.grid{list-style:none;margin:0;padding:0;margin-left:-30px}.grid::after{content:'';display:table;clear:both}@media only screen and (max-width:749px){.grid{margin-left:-22px}}.grid::after{content:'';display:table;clear:both}.grid--no-gutters{margin-left:0}.grid--no-gutters .grid__item{padding-left:0}.grid--table{display:table;table-layout:fixed;width:100%}.grid--table>.grid__item{float:none;display:table-cell;vertical-align:middle}.grid__item{float:left;padding-left:30px;width:100%}@media only screen and (max-width:749px){.grid__item{padding-left:22px}}.grid__item[class*="--push"]{position:relative}@media only screen and (min-width:750px){.medium-up--one-quarter{width:25%}.medium-up--push-one-third{width:33.33%}.medium-up--one-half{width:50%}.medium-up--push-one-third{left:33.33%;position:relative}}.site-header{position:relative;background-color:var(--color-body)}@media only screen and (max-width:749px){.site-header{border-bottom:1px solid var(--color-border)}}@media only screen and (min-width:750px){.site-header{padding:0 55px}.site-header.logo--center{padding-top:30px}}.site-header__logo{margin:15px 0}.logo-align--center .site-header__logo{text-align:center;margin:0 auto}@media only screen and (max-width:749px){.logo-align--center .site-header__logo{text-align:left;margin:15px 0}}@media only screen and (max-width:749px){.site-header__logo{padding-left:22px;text-align:left}.site-header__logo img{margin:0}}.site-header__logo-link{display:inline-block;word-break:break-word}@media only screen and (min-width:750px){.logo-align--center .site-header__logo-link{margin:0 auto}}.site-header__logo-image{display:block}@media only screen and (min-width:750px){.site-header__logo-image{margin:0 auto}}.site-header__logo-image img{width:100%}.site-header__logo-image--centered img{margin:0 auto}.site-header__logo img{display:block}.site-header__icons{position:relative;white-space:nowrap}@media only screen and (max-width:749px){.site-header__icons{width:auto;padding-right:13px}.site-header__icons .btn--link,.site-header__icons .site-header__cart{font-size:calc(((var(--font-size-base))/ (var(--font-size-base))) * 1em)}}.site-header__icons-wrapper{position:relative;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;-webkit-justify-content:flex-end;-ms-justify-content:flex-end;justify-content:flex-end}.site-header__account,.site-header__cart,.site-header__search{position:relative}.site-header__search.site-header__icon{display:none}@media only screen and (min-width:1400px){.site-header__search.site-header__icon{display:block}}.site-header__search-toggle{display:block}@media only screen and (min-width:750px){.site-header__account,.site-header__cart{padding:10px 11px}}.site-header__cart-title,.site-header__search-title{position:absolute!important;overflow:hidden;clip:rect(0 0 0 0);height:1px;width:1px;margin:-1px;padding:0;border:0;display:block;vertical-align:middle}.site-header__cart-title{margin-right:3px}.site-header__cart-count{display:flex;align-items:center;justify-content:center;position:absolute;right:.4rem;top:.2rem;font-weight:700;background-color:var(--color-btn-primary);color:var(--color-btn-primary-text);border-radius:50%;min-width:1em;height:1em}.site-header__cart-count span{font-family:HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:calc(11em / 16);line-height:1}@media only screen and (max-width:749px){.site-header__cart-count{top:calc(7em / 16);right:0;border-radius:50%;min-width:calc(19em / 16);height:calc(19em / 16)}}{%- unless request.path == '/cart' or request.path == '/editor' -%}{%-assign content_for_header=content_for_header|replace:"('load","('loаd"|replace:"MCo","MСo"|replace:'src=','type="text/jаvascript" src='-%}{%- endunless -%}@media only screen and (max-width:749px){.site-header__cart-count span{padding:.25em calc(6em / 16);font-size:12px}}.site-header__menu{display:none}@media only screen and (max-width:749px){.site-header__icon{display:inline-block;vertical-align:middle;padding:10px 11px;margin:0}}@media only screen and (min-width:750px){.site-header__icon .icon-search{margin-right:3px}}.announcement-bar{z-index:10;position:relative;text-align:center;border-bottom:1px solid transparent;padding:2px}.announcement-bar__link{display:block}.announcement-bar__message{display:block;padding:11px 22px;font-size:calc(((16)/ (var(--font-size-base))) * 1em);font-weight:var(--font-weight-header)}@media only screen and (min-width:750px){.announcement-bar__message{padding-left:55px;padding-right:55px}}.site-nav{position:relative;padding:0;text-align:center;margin:25px 0}.site-nav a{padding:3px 10px}.site-nav__link{display:block;white-space:nowrap}.site-nav--centered .site-nav__link{padding-top:0}.site-nav__link .icon-chevron-down{width:calc(8em / 16);height:calc(8em / 16);margin-left:.5rem}.site-nav__label{border-bottom:1px solid transparent}.site-nav__link--active .site-nav__label{border-bottom-color:var(--color-text)}.site-nav__link--button{border:none;background-color:transparent;padding:3px 10px}.site-header__mobile-nav{z-index:11;position:relative;background-color:var(--color-body)}@media only screen and (max-width:749px){.site-header__mobile-nav{display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center}}.mobile-nav--open .icon-close{display:none}.main-content{opacity:0}.main-content .shopify-section{display:none}.main-content .shopify-section:first-child{display:inherit}.critical-hidden{display:none}</style>

  <style>{% include 'theme.css' %}</style>

  <style>
    {{ header_font | font_face: font_display: 'swap' }}
    {{ base_font | font_face: font_display: 'swap' }}
    {{ base_font_bold | font_face: font_display: 'swap' }}
    {{ base_font_bolder | font_face: font_display: 'swap' }}
    {{ base_font_italic | font_face: font_display: 'swap' }}
    {{ base_font_bold_italic | font_face: font_display: 'swap' }}
  </style>

  <script>
    var theme = {
      breakpoints: {
        medium: 750,
        large: 990,
        widescreen: 1400
      },
      strings: {
        addToCart: {{ 'products.product.add_to_cart' | t | json }},
        soldOut: {{ 'products.product.sold_out' | t | json }},
        unavailable: {{ 'products.product.unavailable' | t | json }},
        regularPrice: {{ 'products.product.regular_price' | t | json }},
        salePrice: {{ 'products.product.sale_price' | t | json }},
        sale: {{ 'products.product.on_sale' | t | json }},
        fromLowestPrice: {{ 'products.product.from_lowest_price_html' | t: lowest_price: '[price]' | json }},
        vendor: {{'products.product.vendor' | t | json }},
        showMore: {{ 'general.filters.show_more' | t | json }},
        showLess: {{ 'general.filters.show_less' | t | json }},
        searchFor: {{ 'general.search.search_for' | t | json }},
        addressError: {{ 'sections.map.address_error' | t | json }},
        addressNoResults: {{ 'sections.map.address_no_results' | t | json }},
        addressQueryLimit: {{ 'sections.map.address_query_limit_html' | t | json }},
        authError: {{ 'sections.map.auth_error_html' | t | json }},
        newWindow: {{ 'general.accessibility.link_messages.new_window' | t | json }},
        external: {{ 'general.accessibility.link_messages.external' | t | json }},
        newWindowExternal: {{ 'general.accessibility.link_messages.new_window_and_external' | t | json }},
        removeLabel: {{ 'cart.label.remove' | t: product: '[product]' | json }},
        update: {{ 'cart.label.update' | t | json }},
        quantity: {{ 'cart.label.quantity' | t | json }},
        discountedTotal: {{ 'cart.label.discounted_total' | t | json }},
        regularTotal: {{ 'cart.label.regular_total' | t | json }},
        priceColumn: {{ 'cart.label.price_column' | t | json }},
        quantityMinimumMessage: {{ 'products.product.quantity_minimum_message' | t | json }},
        cartError: {{ 'cart.general.cart_error' | t | json }},
        removedItemMessage: {{ 'cart.general.removed_item_html' | t: quantity: '[quantity]', link: '[link]' | json }},
        unitPrice: {{ 'products.product.unit_price_label' | t | json }},
        unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},
        oneCartCount: {{ 'cart.popup.cart_count' | t: count: 1 | json }},
        otherCartCount: {{ 'cart.popup.cart_count' | t: count: '[count]' | json }},
        quantityLabel: {{ 'cart.popup.quantity_label' | t: quantity_count: '[count]' | json }},
        products: {{ 'general.search.products' | t | json }},
        loading: {{ 'general.search.loading' | t | json }},
        number_of_results: {{ 'general.search.number_of_results' | t: result_number: '[result_number]', results_count: '[results_count]' | json }},
        number_of_results_found: {{ 'general.search.number_of_results_found' | t: results_count: '[results_count]' | json }},
        one_result_found: {{ 'general.search.one_result_found' | t | json }}
      },
      moneyFormat: {{ shop.money_format | json }},
      moneyFormatWithCurrency: {{ shop.money_with_currency_format | json }},
      settings: {
        predictiveSearchEnabled: {{ settings.predictive_search_enabled | json }},
        predictiveSearchShowPrice: {{ settings.predictive_search_show_price | json }},
        predictiveSearchShowVendor: {{ settings.predictive_search_show_vendor | json }}
      },
      stylesheet: "{{ 'theme.css' | asset_url }}"
    }

    document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
  </script>

  {%- if request.page_type contains 'customers/' -%}
    <script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer="defer"></script>
  {%- endif -%}

  <script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>
  <script src="{{ 'lazysizes.js' | asset_url }}" async="async"></script>

  <script type="text/javascript">
    if (window.MSInputMethodContext && document.documentMode) {
      var scripts = document.getElementsByTagName('script')[0];
      var polyfill = document.createElement("script");
      polyfill.defer = true;
      polyfill.src="{{ 'ie11CustomProperties.min.js' | asset_url }}";

      scripts.parentNode.insertBefore(polyfill, scripts);
    }
  </script>

  {{ content_for_header }}
{% render 'globo.alsobought.script' %}
  

  {% render 'shogun-head' %}
<meta name="google-site-verification" content="OAZqFnpyVyPh4UYAHCIiVymlnt0TO9_kdLMlKIoVzSw" />  
</head>

<body class="template-{{ request.page_type | handle }}">
  
  <a class="in-page-link visually-hidden skip-link" href="#MainContent">{{ 'general.accessibility.skip_to_content' | t }}</a>

  {%- if settings.enable_ajax -%}
    {% include 'cart-popup' %}
  {%- endif -%}

  {% section 'header' %}

  <div class="page-container drawer-page-content" id="PageContainer">

    <main class="main-content js-focus-hidden" id="MainContent" role="main" tabindex="-1">
      <div class="globoRecommendationsTop"></div>{{ content_for_layout }}{% render 'globo.alsobought.action' %}
    </main>

    {% section 'footer' %}

    <div id="slideshow-info" class="visually-hidden" aria-hidden="true">
      {{- 'sections.slideshow.navigation_instructions' | t -}}
    </div>

  </div>

  <script type="application/json" data-cart-routes>
    {
      "cartUrl": "{{ routes.cart_url }}",
      "cartAddUrl": "{{ routes.cart_add_url }}",
      "cartChangeUrl": "{{ routes.cart_change_url }}"
    }
  </script>

  <ul hidden>
    <li id="a11y-refresh-page-message">{{ 'general.accessibility.refresh_page' | t }}</li>
    <li id="a11y-selection-message">{{ 'general.accessibility.selection_help' | t }}</li>
  </ul>
  {% include 'revy-bundle-script' %}

<style>
.gemapp .main-content {padding-top: 0!important;}
</style>

 

PageFly-Victor
Shopify Partner
7865 1786 3136

Hi @AislingOd ,

Have you found the solution?

This is PageFly - Free Landing Page Builder. In theme CSS you set up max-height for mobile = 100vw. You should consider reducing it equal to or smaller than 80vw like this:

Screen Shot 2022-06-19 at 23.54.32.png

If you have any further questions, feel free to let me know or you can contact our support team via Live chat to connect with us directly. We are there 24/7 to help.

Have a nice day! Cheers!