Remove white space from custom page

natantantan
Tourist
14 0 2

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

 

Reply 1 (1)

PromarkDC10
Tourist
9 0 0
I am working on these matters as quickly as I can I have requested the
community get involved and several occasions I have reached out to the
community for assistance because I am so far behind I am still here
putting in work to try and assist the community get projects off the ground
by their due dates I've left contact information on the community boards as
well I'm doing the best I can with everything I have to work with I have
welcomed anyone's help and assistance with the projects I'm still working
and willing to take any good advice so that the community may reach its
goals
Darel M McDonald Sr