How to do it in normal style?

  • 0
    I decided to make a pretty design for the form and thought it would be cool if it flipped through and on a normal scale everything worked out and everything is fine, but when I reduce the screen, disgrace occurs. Connoisseurs of css help pliz. If that jsx markup

    HTML

    [[[0_0 ]]]
    <div className={`${Styles.form} ${isMoved && Styles.moved}`}>
                <div className={Styles.fst} />
                <div className={`${Styles.firstSlide} ${Styles.slide} ${isMoved && Styles.moved}`}>
                    <button
                        className={`${Styles.exit}`}
                        onClick={removeNewPasswordForm}> <i className="fas fa-times"/> </button>
                    <input
                        ref={usageRef}
                        autoFocus={true}
                        placeholder={"Usage"} type="text"
                        className={Styles.usageInput}/>
                    <button
                        className={`${Styles.arrow} ${Styles.toWritePassword}`}
                        onClick={() => {setIsMoved(true)}}> <i className="fas fa-angle-right"/> </button>
                </div>
                <div className={`${Styles.secondSlide} ${Styles.slide} ${isMoved && Styles.moved}`}>
                    <button
                        className={`${Styles.arrow} ${Styles.toWriteUsage}`}
                        onClick={() => setIsMoved(false)}> <i className="fas fa-angle-left"/>  </button>
                    <input
                        ref={passwordRef}
                        placeholder={"Password"} type="text"
                        className={Styles.passwordInput}/>
                    <button
                        className={`${Styles.arrow} ${Styles.continue}`}
                        onClick={confirmNewPassword}> <i className="fas fa-angle-double-right"/> </button>
                </div>
            </div>

    CSS Anonymous, May 22, 2020

  • 1 Answers
  • 0
    I decided everything with a change in .moved.

    margin-left: -30vw;

    on

    transform: translate (-30vw);
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!