Topic Closed
fly06
263 Posts
17.8K Downloads
1 Themes
8 Plugins

Hello,

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

Thanks in advance for your help.

 

3 years ago#9360

juergen
1.4K Posts
50.3K Downloads
16 Plugins
design, web development & visual effects

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.

 

3 years ago#9367

fly06
263 Posts
17.8K Downloads
1 Themes
8 Plugins

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.

 

 

 

3 years ago#9379

Topic Closed

 

News

Typesetter 5.1
8/12/2017

Typesetter 5.0.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

Over 8 Times Faster Than Wordpress
5/3/2016

We've known for a long time that Typesetter is fast. It's something we take pride ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Luzern (Schweiz): * Konzeption, Planung und Erstellung Ihres Internet-Auftritts * Betreuung und Aktualisierung/Pflege Ihrer Website * ...

Find out more about our Provider Spotlight

Log In

  Register