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

[AislingOd]

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

https://huginabox.ie/products/luxury-lemon-balm-candle?pr_prod_strat=copurchase&pr_rec_id=e1911208a&pr_rec_pid=7326211899611&pr_ref_pid=7586022818011&pr_seq=uniform

[diego_ezfy]

@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

[AislingOd]

@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]

@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 (press CTRL + F or command + F on Mac)
3. paste this code right above the tag:

Kind regards,
Diego

[AislingOd]

@diego_ezfy Nope that wont work either. Sorry -

[diego_ezfy]

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

[AislingOd]

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

{% include 'best-option-initializer' %}
{% render 'pagefly-head' %}
  

  
{% if template contains 'product' %}

{% elsif template contains 'collection' %}

{% elsif template contains 'cart' %}

{% elsif template contains 'search' %}

{% elsif template contains 'index' %}

{% else %}

{% endif %}

 
  
  
  
  
  
  
  
  

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

  
  
  
  
  

  {%- if canonical_url != blank  -%}
    
  {%- endif -%}

  {%- if settings.favicon != blank -%}
    
  {%- 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: ', ' -%} – {{ 'general.meta.tags' | t: tags: meta_tags -}}
    {%- endif -%}
    {%- if current_page != 1 -%}
      – {{ 'general.meta.page' | t: page: current_page }}
    {%- endif -%}
    {%- assign escaped_page_title = page_title | escape -%}
    {%- unless escaped_page_title contains shop.name -%}
      – {{ shop.name }}
    {%- endunless -%}
  {%- endcapture -%}
  

  {%- if page_description -%}
    
  {%- endif -%}

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

  

  

  

  

  {%- if request.page_type contains 'customers/' -%}
    
  {%- endif -%}

  
  

  

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

  {% render 'shogun-head' %}
  

  
  {{ 'general.accessibility.skip_to_content' | t }}

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

  {% section 'header' %}

  

    

    {% section 'footer' %}

    
      {{- 'sections.slideshow.navigation_instructions' | t -}}
    

  

  

  

    - {{ 'general.accessibility.refresh_page' | t }}

    - {{ 'general.accessibility.selection_help' | t }}
  

  {% include 'revy-bundle-script' %}

[PageFly-Victor]

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:

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!