diff --git a/src/components/stage/stage.css b/src/components/stage/stage.css index 13c83250800c21095d319e0887e11164b88bb38b..425ebde1f8b091e99c822632249448fff3f62c94 100644 --- a/src/components/stage/stage.css +++ b/src/components/stage/stage.css @@ -59,7 +59,11 @@ justify-content: center; } -.monitor-wrapper, .color-picker-wrapper { +.question-wrapper { + position: absolute; +} + +.monitor-wrapper, .color-picker-wrapper, .queston-wrapper { position: absolute; top: 0; left: 0; diff --git a/src/components/stage/stage.jsx b/src/components/stage/stage.jsx index 6d4ee24bd914fbecf9e150f7403b1b255cdeb5cd..ed21d930b4a88018cf448d700b69dafc6fba25fb 100644 --- a/src/components/stage/stage.jsx +++ b/src/components/stage/stage.jsx @@ -78,12 +78,19 @@ const StageComponent = props => { <Box className={styles.monitorWrapper}> <MonitorList /> </Box> - {question === null ? null : ( - <Question - question={question} - onQuestionAnswered={onQuestionAnswered} - /> - )} + <div className={styles.stageOverlayContent}> + <div + className={styles.questionWrapper} + style={{width: widthCorrectedAspect}} + > + {question === null ? null : ( + <Question + question={question} + onQuestionAnswered={onQuestionAnswered} + /> + )} + </div> + </div> </Box> </div> );