Hi guys, we had a developer build a custom page for us.
Sadly, it seems he went MIA and we've been contacting him for weeks but to no response.
We recently switched our themes and had to port and code over all our custom features from the old theme to the new one. I've been making progress on this task, and I'm 95% done, the only last thing I have left is this big chunk of whitespace on the bottom of this custom page he created for us.
This is the page on our site, and you can see the whitespace there
https://www.sprayground.com/pages/shabbat#check
Can anyone help us remove it? I will paste the liquid code below.
<!-- /sections/password.liquid -->
{%- if section.settings.image -%}
{%- assign background_image = section.settings.image | img_url: '1800x' -%}
{%- else -%}
{%- assign background_image = 'password-page-background.jpg' | asset_url -%}
{%- endif -%}
<style>
body{
margin:0px !important;
}
#shopify-section-shabbat {
background: #000;
}
.password__hero {
font-size: 3em;
}
.video-background {
height: 100%;
}
.shabbat-layout {
display: grid;
grid-template-rows: 170px calc(100vh - 215px) ;
position: relative;
background: #000;
}
.top-tab h2{
color: #fff;
font-size: 16px;
margin: 0;
}
.bottom-tab h2{
color: #fff;
}
.middle-container {
border-left: 15px solid #000;
border-right: 15px solid #000;
overflow: hidden;
}
.video-container {
height: 100%;
overflow: hidden;
}
.top-tab {
display: grid;
align-content: center;
text-align: center;
justify-content: center;
}
.top-tab img {
justify-self: center;
}
h4 {
font-size: 12px;
padding: 10px 40px;
margin: 0;
color: #fff;
}
h4 p {
margin: 0;
}
@media (max-width:768px){
.shabbat-layout {
grid-template-rows: none;
grid-auto-rows: auto;
}
.shabbat-layout.shabbat-image {
grid-template-rows: 170px calc(100vh - 215px);
}
.top-tab {
padding: 20px 0;
}
.video-container{
overflow: hidden;
}
video {
}
}
</style>
<div class="shabbat-layout {% if section.settings.imgorvid == "image" %} shabbat-image {% endif %}">
<div class="top-tab" >
{% if section.settings.logo %}
{% capture image_size %}x40{% endcapture %}
<img src="{{ section.settings.logo | img_url: image_size }}"
srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
alt="{{ section.settings.logo.alt | default: shop.name }}"
class="logo"
itemprop="logo">
{% else %}
<h2>
<span >{{ section.settings.custom_message }} </span>
</h2>
{% endif %}
{% if section.settings.custom_message_2 %}
<h4> {{ section.settings.custom_message_2 }} </h4>
{% endif %}
<h2 id="timer" ></h2>
</div>
<div class="middle-container">
{% if section.settings.imgorvid == "video" %}
<div class="video-container">
<video autoplay loop muted playsinline width="100%">
<source src="{{ section.settings.video_url }}" type="video/mp4" id="{{ section.id }}">
</video>
</div>
</div>
{% elsif section.settings.imgorvid == "image" %}
<div class="password__wrapper" style="background-image: url('{{ background_image }}');"></div>
{% endif %}
</div>
<div id="LoginModal" class="password__login-form text-center mfp-hide">
<p class="h4 title">{{ 'general.password_page.login_form_heading' | t }}</p>
</div>
{{ 'shop.js' | asset_url | script_tag }}
<script>
$(function() {
$('.js-toggle-login-modal').magnificPopup({
type: 'inline',
mainClass: 'mfp-fade',
closeOnBgClick: false,
closeBtnInside: false,
closeOnContentClick: false,
tClose: 'x',
removalDelay: 500,
callbacks: {
open: function() {
window.setTimeout( function() { document.getElementById('password').focus(); }, 50 );
},
close: function() {
window.setTimeout( function() { document.getElementById('email').focus(); }, 50 );
}
}
});
if ( $('.storefront-password-form .errors').size() ) {
$('.js-toggle-login-modal').click();
}
});
</script>
{% schema %}
{
"name": "Shabbat page",
"class": "password-section",
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": "Logo image"
},
{
"type": "radio",
"id": "imgorvid",
"label": "Background Image or Video",
"options": [
{ "value": "image", "label": "Image" },
{ "value": "video", "label": "Video" }
],
"default": "image"
},
{
"type": "image_picker",
"id": "image",
"label": "Background Image"
},
{
"id": "custom_message",
"type": "richtext",
"label": "Custom Message"
},
{
"id": "custom_message_2",
"type": "richtext",
"label": "Custom Message 2"
},
{
"id": "video_url",
"type": "text",
"label": "Background Video URL"
}
]
}
{% endschema %}
