Problems with slide/slider height and modal pop-up SEMI-SOLVED

[francikina]

Hello,
i have a couple of problems with my website:

1. slide 1 and slide 3 (in the homepage) behave strangely when i test the responsiveness on tablet and mobile views.
   I cannot manage to get the slide to cover the full height of the slider and there is a grey space on the bottom - marking the gap between the slide and the slider´s heights.

2. the modal pop-up (which i built based on good info found in this forum) works only on desktop but not on mobile and tablet.

https://preview.webflow.com/preview/umu2?preview=c9f6e7c9ca59ac469a5d6d8c71860303

Any suggestion on how to solve these issues?
Thanks

[sabanna (Anna)]

Hi @francikina

@francikina

I cannot manage to get the slide to cover the full height of the slider and there is a grey space on the bottom - marking the gap between the slide and the slider´s heights.

On mobile view you made slider height: auto. It means that slider will take height of highest slide. Somehow all your slides are different (depend on content) and 3rd has biggest height.

For resolve this issue you will have to give slider some fixed height.

@francikina

2. the modal pop-up (which i built based on good info found in this forum) works only on desktop but not on mobile and tablet.

Could be more specific, please? Where is that modal window (which page/section) and what element activate it.

Cheers,
Anna

[francikina]

Hi Anna,
thanks so much for your help.
I will review the slides and give to all of them the same height
Is it wise to use VH height or would you suggest to use px?

I also wonder: sliders sometimes fail to autoplay on tablet and mobile version ( happening just now on the published site). Is this a common bug?

About the modal window:
the trigger - modal link is the we chat icon. Then you have the modal background positioned under the footer.

i added this code

   <script type="text/javascript">
$(document).ready(function() {
  $('.modal-link').click(function() {
    $('.modal-background').fadeIn();
  });
  $('.close-modal').click(function() {
    $('.modal-background').fadeOut();
  });
});
</script>

as per a tutorial found on the forum.

Works well on the desktop version of the published site http://umeauniversity.webflow.io/ but not on the tablet and mobile views. Have no clue of the reason…

Again, thanks a lot!

[sabanna (Anna)]

You can create modal pop-up without any code in Webflow.
Here is tutorial created by one of our most cheerful Webflowers @waldo (only code been used for prevent page from scrolling while modal window is opened)
http://forum.webflow.com/t/tutorial-99-9-webflow-created-modal-tutorial-freebie-clone-able-page/21726
Many of us used this option already and can tell you: this one will work on any device,

Slider can stop autoplay if user touched (“stopped”) the slide. Will try to find more information about this.

About measurements. VH and VW are pretty useful for creating responsive design, which will depend on screen size. But there are always some moments which you have to notice.

For example, in you situation there are no images as elements, only set background to divs. So you can easy use VH. But if there would be images (as elements) inside the slides, you would have to keep slider dimensions in dependency of image ratio, which is easier with Pixels.

Hope I was able to explain

[francikina]

Dear Anna,
you were just GREAT! Thanks a lot, i fixed according to your suggestions and it works like a charm.
I would be very grateful if i could take 1 more moment of your time.

The modal pop up works fine on all browsers apart from microsoft edge… in that case it doesn´t work.
Actually a pretty weird thing happens. The webflow published website umeauniversity.webflow.io works , while my exported website umu.cn.com doesn´t.
I inspected the element and it seems the code is different between the 2.
this is the exported one

this is the webflow published one

Any suggestion on how to go about it?
I hope in your magic skills power!

[sabanna (Anna)]

Thank you, @francikina ! Magic skills are just positive energy from helping others.

About the difference in code: try un-publish Webflow site and publish it again. Then export the code.
Let me know if it helps

Cheers,
Anna

[francikina]

Hello,
i tried several times but the problem persists.
It really seems that a part of the code - the whole style part- disappears when opening the exported website in microsoft edge - while it is fine on other browsers.

I will create a new topic about this,
thanks again and any new input is very welcome :)grin:
Francesca

[francikina]

Jut to update the status: it seems that the pop-up problem is solved… i exported the website a couple of more times and then it worked. As the wise Anna suggested initially.

I am slightly worried about the unpredictability of the exported websites. Maybe it is caused by mistakes or bad organization of my website, but often:

• menu buttons are not working on tablet and mobile (i am in this situation now)
• modal pop up not working on tablet and mobile (same as above)

this happens in a complete random way. I export the site and everything works. i make a small modification (on other parts of the website), export again and things stop working.
what could cause this variable behaviour?

Thanks to the staff for the support!
F