score:0

import React, { useState, useEffect, useLayoutEffect } from 'react';
import './App.css';

const App = () => {
    const [mediaMatch, setMediaMatch] = useState();
    const handler = e => setMediaMatch(e.matches);

    useEffect(() => {
        window.matchMedia('(min-width: 768px)').addListener(handler);
        return () => {
            window.removeEventListener(handler);
        };
    }, []);

    return (
        <div className="container">
            <div className="row">
                <div className="col-12">
                    <div className="first">
                        <button
                            onClick={applyStyle}
                            style={{
                                marginBottom: mediaMatch ? '300px' : '150px'
                            }}
                            className="btn btn-primary"
                        >
                            Click here
                        </button>
                        <span className="closeWindow">
                            <i className="far fa-window-close" />
                        </span>
                    </div>
                    <div className="second" />
                </div>
            </div>
        </div>
    );
};

score:1

@media screen and (max-width: 375px) {
  button {
    margin-bottom: 300px;
  }
}

Related Query

More Query from same tag