I'm hoping someone can show me how to make this react modal mobile responsive. It isn't using bootstrap.
<ReactModal
isOpen={this.state.showModal}
style={{
overlay: {
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(0, 0, 0, 0.5)'
},
content: {
position: 'absolute',
top: 'auto',
marginLeft: '70px',
marginRight: '70px',
bottom: '200px',
border: '1px solid #ccc',
background: '#000',
overflow: 'auto',
WebkitOverflowScrolling: 'touch',
borderRadius: '10px',
outline: 'none',
padding: '20px'
}
}}>
You won't be able to add media queries to inline styles of your modal.
To add media queries, you should use classes:
React-modal Demo on GitHub: Using CSS classes for styling
Then you will be able to add different styles for different types of screen in your CSS.