React Modal and Media-queries

Question

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'
        }
    }}>

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered May 07 '19 at 17:16

gael

1,314
2
12
20

score 0 · Answer 2 · answered Jan 29 '23 at 17:20

I don't think you can embed media queries in react-modal, but you can get some properties from the window object that can be added to an inline style as below. This example sets the width of the modal to 98vw if the screen is less than 768px wide, and default width otherwise.

function isSmallScreen(): Boolean {
    if (typeof window !== 'undefined') {
        return window.innerWidth < 768;
    }
    return false;
}



return (
    <ReactModal
        isOpen={show}
        contentLabel="onRequestClose Example"
        onRequestClose={() => {
            setShowModal(!show)
            setIsLoading(false)
        }}
        shouldCloseOnOverlayClick={true}
        style={{
            content: {
                top: '50%',
                left: '50%',
                right: 'auto',
                bottom: 'auto',
                marginRight: '-50%',
                transform: 'translate(-50%, -50%)',
                height: '80vh',
                overflow: 'none',
                width: isSmallScreen() ? '98vw' : ''
            }
        }}
        ariaHideApp={false}
    >

React Modal and Media-queries

2 Answers2