Modal Scrolling Problem - Disappearing Elements

angie · November 12, 2020, 5:50am

Hi,

I’m having scrolling issue with modal. The modal scroll works fine till it’s in mobile landscape view/ narrower desktop view.

When the screen gets smaller, the heading “How can I help you” (Both in mobile landscape view and desktop) and text field for name (in desktop) disappear from the screen for some reason.
I have experimented with custom codes to try solving this problem but I haven’t found a solution.

What it supposed to look like at the top:

What it currently looks like at the top:
(Desktop - small screen/narrower view)

(Mobile Landscape view)

Could anyone please help me with this issue?
Thank you in advance!

The modal is located at Homepage>About, and the button is called “Project Enquiry”:

This is the code I’m using for Modal:

<script type="text/javascript">

$(document).ready(function() {
  $('.modal-link').click(function() {
    $('.modal-section').fadeIn();
  });
  $('.close-modal').click(function() {
    $('.modal-section').fadeOut();
  });
});

</script>

<script>
Webflow.push(function() {
  $('.modal-link').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'hidden');
  });
  $('.close-modal').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'auto');
  });
});
</script>

<style>
.modal-window {overflow: auto;}
</style>

Here is my site Read-Only: LINK
https://preview.webflow.com/preview/anju-creative-23bec9?utm_medium=preview_link&utm_source=designer&utm_content=anju-creative-23bec9&preview=fe4f6b5a93db44b58b20e8729914f7a7&mode=preview