-1

When running my login page on IE 11 with a screen size of less than 700px, the site looks like this:

enter image description here

The space on the right hand side that causes scrollbars that should not exist. I usually would assume that there is something overflowing, but I don't see any content that would cause this behaviour.

Here is a rundown of the page's code: https://codepen.io/bitz/full/brayEb/

I was thinking that it has something to do with the way I set the width:

html {
    height: 100%;
    width: 100%;
    margin: 0;
    background: rgb(90, 103, 113);
    font-family: Arial !important;
    font-size: 12px !important;
}

But I tried changing it a bit to no effect.

Bitz
  • 1,128
  • 11
  • 33

2 Answers2

0

Try to take this off from your CSS

@media only screen and (max-width: 1000px) {
body#login-body 
  {
    background-size: contain;
   }
}
mythoslife
  • 203
  • 1
  • 6
  • 20
  • That bit of code will affect the `background-size`, it won't change the fact that there are scrollbars. I did it- no luck. :( Thanks! – Bitz Aug 17 '17 at 20:45
0

Turns out IE does not like transform css at all, so I opted to center the objects in a different way, as outlined here.

Basically:

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto; 
    width: /*whatever width you want*/;
}

Instead of the system that was used in the codepen.

Bitz
  • 1,128
  • 11
  • 33
  • Link only answers are not allowed on SO. Either post your solution here or delete this altogether since links can die and your answer will help no one in the future. https://stackoverflow.com/help/how-to-answer – Rob Aug 17 '17 at 21:37