How to make popup modal scrollable on smaller screens

I have a popup modal that is 800 pixels in height. When I view on mobile I can’t scroll to the bottom. Not sure which css rules are preventing?

here is a link. it’s the “Find A Salon” button at the top right that launches the modal.

Any ideas?

Hi,

When the modal is open you are hiding the overflow on the body so that means that any element that is taller than the viewport will have its overflow cut off and you cannot scroll to it.

The idea of the modal is that you keep it within the viewport but you have sized it to be 800px high which means that on any screen that is less than 890px tall (800px height + top offset etc) then you will not be able to scroll to see that element as the body is cut off.

If you want an 800px height on taller screens then you will need a media query to remove that height on smaller screens and to allow it to scroll.

e.g.

@media screen and (max-height:890px){
 .FindASalonMenu{
   height:auto;
   bottom:0;
  overflow:auto;
 }
}

Once again… Paul to the rescue. Thanks again I really appreciate the explanation as well.

2 Likes

Just notice another issue with the modal.The button tom open the modal is in a sticky nav at the top of the page. If the user has scrolled down near the bottom of the page and click the modal If you are scrolled down towards the bottom of the page and click the button since it’s positioned absolute under the Navbar you can’t see it… or scroll or anything. How can I make it relative to the screen in view and positioned at the top right of the current view? So that’s it pops open at the top right of the current viewpoint rather than the top right of the page? here is a link to the dev

Your modal should be position:fixed and not absolute otherwise it scrolls with the document. :slight_smile:

.FindASalonMenu{position:fixed;}