I'm currently focused on enhancing the accessibility of my web pages. A challenge I've encountered is that when I expand the width of my page, the elements appear to shift further down the screen. It seems like this issue may be related to setting an upper margin based on a percentage rather than a fixed value. I'm uncertain why the height increases as the screen widens. Does the height and width have a fixed ratio when using flexGrow?
I'm utilizing material-ui with these customized styles:
const styles = theme => ({
root : {
flexGrow: 1,
height: '100%',
width: '100%',
display: 'flex',
justifyContent: 'center',
backgroundColor: 'green'
},
form: {
backgroundColor: 'grey',
width: '75%',
display: 'flex',
flexDirection: 'column',
marginTop: '40%',
marginBottom: '50%',
padding: 20,
paddingTop: 35,
minHeight: 200,
},
})
This is the form element I'm working on:
<div className={classes.root}>
<form className={classes.form} onSubmit={this.login}>
<Typography component="h2" variant="headline">Login</Typography>
</form>
</div>
I anticipated that the form's height would remain constant as the width expands, but I'm not observing this outcome.