DARK: theme 1 > fix empty page height

assets/main.css

@@ -21,6 +21,11 @@ body {
   position: relative;
 }
 
+.main-content {
+  display: inline-block;
+  width: 100%;
+}
+
 .yc-btn span,
 .yc-btn,
 html,

assets/main.js

@@ -193,23 +193,24 @@ overlay.addEventListener('click', closeSearch);
 /**
  * This function is for always putting the footer at the bottom of the screen
  */
-
 function stickFooterAtBottom() {
-  const stickFooter = $('#stick-footer');
+  const mainContent = $('.main-content');
   let htmlPageHeight = document.documentElement.clientHeight;
   let bodyHeight = document.body.offsetHeight;
   let emptySpaceHeight = `${htmlPageHeight - bodyHeight}px`;
 
   if (emptySpaceHeight < '0px') {
-    emptySpaceHeight = '32px';
+    emptySpaceHeight = '0px';
   }
 
-  if (stickFooter) {
-    stickFooter.style.marginBottom = emptySpaceHeight;
+  if (mainContent) {
+    mainContent.style.marginBottom = emptySpaceHeight;
   }
 }
 
-stickFooterAtBottom();
+window.addEventListener('load', (event) => {
+  stickFooterAtBottom();
+});
 
 /* ------------------------------------------------------ */
 /* ----- Display each video section -------------------- */

layouts/theme.liquid

@@ -18,7 +18,9 @@
     {%- section 'notice-bar' %}
     {%- section 'main-navbar' %}
 
-    {{ content_for_layout }}
+    <main class="main-content">
+      {{ content_for_layout }}
+    </main>
 
     {% section 'main-footer' %}
     {%- render 'cart-drawer' -%}

sections/main-cart.liquid

@@ -137,7 +137,7 @@
     </div>
     </div>
   {%- endif %}
-  <div class='{% if cart and cart.items %}hidden {% endif %} container empty-cart pt-12' id="stick-footer">
+  <div class='{% if cart and cart.items %}hidden {% endif %} container empty-cart pt-12'>
     <div class='flex flex-col justify-center text-center items-center gap-3'>
       <ion-icon
         name='cart-outline'

sections/main-collection.liquid

@@ -2,31 +2,41 @@
 {{ 'product-listing.css' | asset_url | stylesheet_tag }}
 
 {%- assign per_page = section.settings.items_per_page -%}
-<div class='yc-product-listing-container' id="stick-footer">
-  <div class="breadcrumbs-container">
-    {%- render 'breadcrumbs' -%}
-    <div class="breadcrumbs-name">
-      <h1>{{ category.name }}</h1>
-    </div>
-  </div>
-  <div class="sort-container">
-    {%- render 'main-sort' -%}
-  </div>
-
+<div class='yc-product-listing-container'>
   {%- paginate collection.products by per_page cod, category_id: category.id %}
-    <div class="subcategories">
-      {% for subcategory in subCategories %}
-        {% render 'subCategory', subcategory: subcategory %}
-      {% endfor %}
-    </div>
-    <div class='product-list'>
-      {% for product in items %}
-        {% render 'product-preview', item: product %}
-      {% endfor %}
-    </div>
+    {% if items %}
+      <div class="breadcrumbs-container">
+        {%- render 'breadcrumbs' -%}
+        <div class="breadcrumbs-name">
+          <h1>{{ category.name }}</h1>
+        </div>
+      </div>
+      <div class="sort-container">
+        {%- render 'main-sort' -%}
+      </div>
+      <div class="subcategories">
+        {% for subcategory in subCategories %}
+          {% render 'subCategory', subcategory: subcategory %}
+        {% endfor %}
+      </div>
+      <div class='product-list'>
+        {% for product in items %}
+          {% render 'product-preview', item: product %}
+        {% endfor %}
+      </div>
 
-    <!-- prettier-ignore -->
-    {%- render 'main-pagination', has_more: has_more, next_page: next_page, previous_page: previous_page, current: current, last: last -%}
+      {%- render 'main-pagination', has_more: has_more, next_page: next_page, previous_page: previous_page, current: current, last: last -%}
+    {% else %}
+      <div class='flex flex-col justify-center text-center items-center gap-3 pt-12'>
+        <div class='text-2xl'>{{ 'search.empty.title' | t }}</div>
+        <div class='opacity-60'>
+          <p>{{ 'search.empty.description' | t }}</p>
+        </div>
+        <a href='/' class='yc-btn mt-5'>
+          {{ 'search.empty.home_page' | t }}
+        </a>
+      </div>
+    {% endif %}
   {%- endpaginate %}
 </div>
 

sections/main-search.liquid

@@ -16,7 +16,7 @@
 {%- assign products_per_page = section.settings.products_per_page -%}
 
 {%- paginate search.products by products_per_page cod %}
-  <div class='yc-featured-products yc-search-{{id}} container' id="stick-footer">
+  <div class='yc-featured-products yc-search-{{id}} container'>
     {%- if items %}
       <div class="sort-container search-page">
         {%- render 'main-sort' -%}

sections/main-upsell.liquid

@@ -1,6 +1,6 @@
 {{ 'upsell.css' | asset_url | stylesheet_tag }}
 
-<div class="upsell-page" id="stick-footer">
+<div class="upsell-page">
   <div class="upsell-container">
     <div class="upsell-content">
       {{ upsell.description }}

styles/main.scss

@@ -22,6 +22,11 @@ body {
   position: relative;
 }
 
+.main-content {
+  display: inline-block;
+  width: 100%;
+}
+
 .yc-btn span,
 .yc-btn,
 html,