Problem with Debut theme;

Solved
Remco112
Excursionist
35 4 4

Hi all,

 

Somehow I'm having trouble with this this line of code: 

 

<html class="js svg flexbox csstransforms" lang="nl" style="padding-bottom: 60px;"><head><script type="text/javascript" 
I simply cannot delete the line of code, because I can't find it I simply want to remove the "padding-bottom: 60px" line, I've tried to do several !important statements etc, but nothing seems to work, not sure why it won't let me delete it, help is really appreciated, since I just wasted 3 hours searching for it and trying to delete it with code;
 
Accepted Solution (1)
Remco112
Excursionist
35 4 4

This is an accepted solution.

added this code in theme.js at the bottom of the file 

 

$(window).load(function() {

  $('html').removeAttr('style');

});

Thanks, 

View solution in original post

Replies 11 (11)
Jasoliya
Shopify Expert
4723 615 1176

Hi,

You can find this <html> tag in following file

1. Go to Online Store->Theme->Edit code

2. Layout->theme.liqud file

Check <html> tag and remove padding style.

Let me know if you can't

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here
Remco112
Excursionist
35 4 4

Thank you for the response, but somehow I can't find it in the code; or am I simply overlooking it? I've added the code from that page:

 

<!doctype html>
<html class="no-js" lang="{{ shop.locale }}">
<head>
  <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="canonical" href="{{ canonical_url }}">
  
  
  
  <script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("myBtn").style.display = "block";
  } else {
    document.getElementById("myBtn").style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>

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

  {%- capture seo_title -%}
    {%- if template == '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' %}

  {{ 'theme.scss.css' | asset_url | stylesheet_tag }}

  <script>
    var theme = {
      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 }},
        sale: {{ 'products.product.on_sale' | t | json }},
        showMore: {{ 'general.filters.show_more' | t | json }},
        showLess: {{ 'general.filters.show_less' | 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 }}
      },
      moneyFormat: {{ shop.money_format | json }}
    }

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


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

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

  {{ content_for_header }}

	{{ shop.metafields.loox["global_html_head"] }}
</head>

<body class="template-{{ template | split: '.' | first }}">

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

  <div id="SearchDrawer" class="search-bar drawer drawer--top" role="dialog" aria-modal="true" aria-label="{{ 'general.search.placeholder' | t }}">
    <div class="search-bar__table">
      <div class="search-bar__table-cell search-bar__form-wrapper">
        <form class="search search-bar__form" action="/search" method="get" role="search">
          <input class="search__input search-bar__input" type="search" name="q" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}">
          <button class="search-bar__submit search__submit btn--link" type="submit">
            {% include 'icon-search' %}
            <span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
          </button>
        </form>
      </div>
      <div class="search-bar__table-cell text-right">
        <button type="button" class="btn--link search-bar__close js-drawer-close">
          {% include 'icon-close' %}
          <span class="icon__fallback-text">{{ 'general.search.close' | t }}</span>
        </button>
      </div>
    </div>
  </div>
  
<button onclick="topFunction()" id="myBtn" title="Naar boven">Top</button>
  
  {% section 'header' %}

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

    <main class="main-content js-focus-hidden" id="MainContent" role="main" tabindex="-1">
      {{ content_for_layout }}
    </main>

    {% section 'footer' %}

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

  </div>

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

	{{ shop.metafields.loox["global_html_body"] }}
</body>
</html>
Jasoliya
Shopify Expert
4723 615 1176

Send me your store url i have to check because i think this style added on page load by any app

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here
Remco112
Excursionist
35 4 4

I would gladly give you the URL; but I still  have a password on it, do I give you the password and change it later? is it possible to pm me about it? thanks so much!

Jasoliya
Shopify Expert
4723 615 1176

No worry, you can send me over mail or Skype 

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here
Remco112
Excursionist
35 4 4

Done 🙂

Remco112
Excursionist
35 4 4

This is an accepted solution.

added this code in theme.js at the bottom of the file 

 

$(window).load(function() {

  $('html').removeAttr('style');

});

Thanks, 

paccto
New Member
8 0 0

Hi, I'm having problems with a Text alert in the very bottom of mi template debut, here is mi web page link 

its says

include usage is not allowed in this context 

 

cocomonier
Shopify Partner
3 0 1

While I can see this might have solved the problem, it still seems unclear what script was adding this inline style in the first place. Trying to troubleshoot this right now and have the exact same issue of the inline style "padding-bottom: 60px;" being applied to the html element. It would be good to understand what is responsible for this. I'll post it here in case others are experiencing this issue. In the mean time if anyone else has insight here, please share. 

 

 


@Remco112 wrote:

added this code in theme.js at the bottom of the file 

 

$(window).load(function() {

  $('html').removeAttr('style');

});

Thanks, 



J_lamb
New Member
3 0 0

Hey Everyone,

I believe Shopify adds this padding when the preview bar is visible. As soon as the preview bar is hidden the padding will disappear.

Hope that helps!

RanaPartap
New Member
1 0 0

Actually this issue is arising when Preview Bar is visible in development themes and we hide the iframe somehow via css/js. The permanent solution is to hide the preview bar iframe and remove that completely like this:

 

document.addEventListener("DOMContentLoaded", function(event) {
  setTimeout(function () {
    jQuery('#preview-bar-iframe').fadeOut("slow", function () {
      $("html").removeAttr("style");
      jQuery('#preview-bar-iframe').remove()
    });
  }, 6000);
});
Thank you