Hello,

How can I make the admin modal box (gp_admin_box) responsive?

Thanks in advance for your help.

Hi Frederic,

try

#gp_admin_box {
  left: 50vw !important;
  max-width: calc(100vw - 30px);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

but it also depends on the content.
Some wider tables will not play along without additional formatting.

Hi Juergen,

Thanks a lot for your input but the move was a bit trickier since the modal css was partly set in a css file and partly in a js file.

To summarize the changes:

Css:

#gp_admin_box position property set to relative instead of absolute
#gp_admin_box top property removed
#gp_admin_box margin property set to 40px auto 0
#gp_admin_box max-width property set to 640px;

Js:

#gp_admin_box left and top properties removed
#gp_admin_boxc width property set to auto instead of 640px

This makes the box responsive.

I also add this from your post :

#gp_admin_box { max-width: calc(100vw - 30px); }

in my responsive.css stylesheet to get some left/right margins when the screen width is below 640px. 

F.