Energ Energ - 1 month ago 16
CSS Question

CSS - Make fixed modal responsive

I created a popup with CSS and when I check it on mobile devices I can't scroll down.



.popup {
position: fixed;
left: 0;
right: 0;
top: 20%;
width: 100%;
max-width: 500px;
margin: auto;
background: #fff;
padding: 40px;
text-align: center;
box-shadow: 0 0 90px #aaa;
z-index: 410;
}

<div class="popup">
<h2>Login</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti nulla facere, velit fuga. Natus suscipit, vel non, quas ullam accusamus eius at unde consequatur quo, quaerat. Quibusdam provident sunt adipisci, perspiciatis doloribus, porro consectetur, libero ad ipsa quo error nihil. Nisi, laboriosam illum sapiente enim exercitationem! Expedita quod, aliquid corporis eveniet veritatis harum eos ad minus eligendi a amet ipsam at neque saepe excepturi inventore nobis consequuntur magnam sint quas perspiciatis ratione ea tenetur facilis fugit. Ex consectetur sequi voluptas odio unde, dolorum amet, non eius minima eaque rerum, deleniti repellendus sunt accusantium culpa explicabo mollitia molestiae nobis! Architecto deserunt necessitatibus maxime. Nulla quis maxime veritatis reprehenderit aut, velit voluptatibus suscipit harum consequuntur atque doloribus fuga expedita ab laboriosam veniam animi, similique quo? Illum nisi odit voluptatum corporis accusantium ab, libero, dolorum nesciunt maiores quasi alias. Dolore hic, vero. Cupiditate velit error praesentium tempore consequatur ipsum repellat eaque ex, tenetur, saepe odit magnam omnis! Mollitia cum nesciunt quibusdam eos ea voluptas delectus doloribus ipsam nemo quisquam numquam ratione hic accusamus animi perferendis, qui laudantium dolorem nostrum. Voluptatum eveniet consequatur laudantium asperiores, quia esse explicabo nemo nam repellat voluptas ab dolorem maxime reiciendis nostrum, libero non minima? Sint sed aliquid dignissimos!</p>
</div>





Preview: https://jsfiddle.net/ea1grfqr/

Answer

Since it is a popup, I am assuming the position does not need to be fixed. Just change your position to absolute. Here's more about positioning.

.popup {
    position: absolute;
    left: 0;
    right: 0;
    top: 20%;
    width: 100%;
    max-width: 500px;
    margin: auto;
    background: #fff;
    padding: 40px;
    text-align: center;
    box-shadow: 0 0 90px #aaa;
    z-index: 410;
}
<div class="popup">
  <h2>Login</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti nulla facere, velit fuga. Natus suscipit, vel non, quas ullam accusamus eius at unde consequatur quo, quaerat. Quibusdam provident sunt adipisci, perspiciatis doloribus, porro consectetur, libero ad ipsa quo error nihil. Nisi, laboriosam illum sapiente enim exercitationem! Expedita quod, aliquid corporis eveniet veritatis harum eos ad minus eligendi a amet ipsam at neque saepe excepturi inventore nobis consequuntur magnam sint quas perspiciatis ratione ea tenetur facilis fugit. Ex consectetur sequi voluptas odio unde, dolorum amet, non eius minima eaque rerum, deleniti repellendus sunt accusantium culpa explicabo mollitia molestiae nobis! Architecto deserunt necessitatibus maxime. Nulla quis maxime veritatis reprehenderit aut, velit voluptatibus suscipit harum consequuntur atque doloribus fuga expedita ab laboriosam veniam animi, similique quo? Illum nisi odit voluptatum corporis accusantium ab, libero, dolorum nesciunt maiores quasi alias. Dolore hic, vero. Cupiditate velit error praesentium tempore consequatur ipsum repellat eaque ex, tenetur, saepe odit magnam omnis! Mollitia cum nesciunt quibusdam eos ea voluptas delectus doloribus ipsam nemo quisquam numquam ratione hic accusamus animi perferendis, qui laudantium dolorem nostrum. Voluptatum eveniet consequatur laudantium asperiores, quia esse explicabo nemo nam repellat voluptas ab dolorem maxime reiciendis nostrum, libero non minima? Sint sed aliquid dignissimos!</p>
</div>

Comments