CODEWITHSUNDEEP
javascriptcssmodal-dialogoverlay
sftaco
sftaco

Reputation: 75

Overlay is expanding outside the viewport

I have an overlay that is supposed to cover the entire page when opened - it works except all of the sudden the overlay is larger than the viewport by about 50px and causes a horizontal scroll. I am not sure how to ensure that the overlay only covered the viewport size? I was using width: 100vw and that worked perfectly and now I can't seem to keep the size inside of the vw of various screen sizes.

    .modal-footer-large {
      height: 100%;
      background-color: white;
      position: fixed;
      z-index: 1;
      left: 0;
      right: 0;
      top: 40px;
      overflow: hidden;
      padding: 10px 40px;
   }

Upvotes: 1

Views: 255

Answers (1)

Patrick Bentley
Patrick Bentley

Reputation: 492

Try using cover size

background-size:cover;

OR: 

width: 100%

Upvotes: 1

Related Questions