CODEWITHSUNDEEP
javascripthtmlcssmodal-dialog
user2252219
user2252219

Reputation: 865

Modal window not taking full 100 width

I've a modal window that I want to take the full screen. I've got it to have 100% height but width isn't working. I've tried using min-width: 100%; but that gave more than 100%.

https://jsfiddle.net/k5adr0wc/

Just click on that img icon or the modal buttons. I've also tried 

.remodal-is-initialized {

  display:inline-block;
  width: 100%;
  height: 100%;

Upvotes: 0

Views: 3834

Answers (3)

user2252219
user2252219

Reputation: 865

I also noticed at the bottom of the modal there's a little gap of just empty space? How do I get rid of that?

Upvotes: 0

DavidDomain
DavidDomain

Reputation: 15293

The problem is in the following media query. You have a max-width of 700px. Remove it and it will work.

/* Media queries
   ========================================================================== */

@media only screen and (min-width: 641px) {

    .remodal {

        max-width: 700px;

    }

}

Also remove the padding on the .remodal class.

.remodal {

    width: 100%;

    margin-bottom: 10px;
    /* remove padding */
    padding: 35px;
    ...

There also seems to be a problem with the #outer div. You have overflowing content which produces a second scroll-bar on the right.

Upvotes: 1

Ahs N
Ahs N

Reputation: 8366

Add the following to your CSS:

.remodal {
    max-width: 100% !important;
}

Here is a JSFiddle demo

Upvotes: 1

Related Questions