#jpo-welcome-panel { *, *:before, *:after { box-sizing: border-box; } position: fixed; top: 32px; left: 160px; bottom: 0; z-index: 999; width: calc( 100% - 160px ); overflow: auto; box-sizing: border-box; background-color: #f1f1f1; @media ( max-width: 960px ) { left: 36px; width: calc( 100% - 36px ); } @media ( max-width: 782px ) { top: 0; left: 0px; width: 100%; } } .welcome__wrapper { position: relative; background: #fff; border: 1px solid #ddd; margin: 56px 10px 10px; padding: 52px 16px; min-height: 600px; // fallback min-height: calc( 100vh - 66px ); // 46 + 20 @include fancy-clearfix; @media ( min-width: 782px ) { margin: 20px; padding: 80px 16px; min-height: calc( 100vh - 72px ); // 32 + 40 } button + button { margin-left: 20px; } img { width: 100%; max-width: 100%; } } .welcome__container { padding: 0 10px; width: 100%; max-width: 1024px; margin: 0 auto; } .welcome__content-box { background: white; margin: 10px; border: 1px solid #eee; } .welcome__debug { position: relative; z-index: 11; } .welcome__loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; background-color: rgba( white, 0.6 ); } .welcome__loading-message { position: absolute; left: 50%; top: 200px; padding: 20px; width: 50%; min-width: 300px; text-align: center; background-color: white; border-radius: 2px; border: 2px solid #888; transform: translate( -50%, 0 ); * { vertical-align: middle; } } .welcome__submit { margin-top: 32px; } img.welcome__loading-spinner { width: 16px; height: 16px; } #welcome__jetpack { .welcome__skip-step { margin-left: 10px; } }