CSS External file for responsive

Hi All,
I am a newbie in Frontity.
I would like to create an external css file for the responsive (responsive.js)

Here is the content of the file:

import { css } from "frontity";

    const cssResponsive = css`
    	@media (max-width: 1600px) {
        .row{
            width: 100%;
        }
        .container{
            width: 1440px;
        }
        .row-header{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            padding: 16px 0px;
        }
        .mobileContainer .site-logo{
            display: none;
        }
        .site-logo{
            margin-right: 24px;
            margin-left: 32px;
        }
        div.header-menu{
            width: 88%;
        }
        div.destop-menu{
            display: flex;
            width: 100%;
        }
        div.destopNavContainer{
            width: 58%;
        }
        div.destopNavRightContainer{
            width: 40%;
            text-align: right;
        }
        .menuToggle{
            position: absolute;
            right: 24px;
            top: 24px;
            background: transparent;
            border: 0;
            color: white;
            z-index: 5;
            height: 40px;
            width: 40px;
            display: none;
        }
    }

    @media (max-width: 560px) {
        .menuToggle{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .mobileContainer{
            background: #0000EA;
            width: 848px;
            max-width: 100%;
            box-sizing: border-box;
            padding: 0px;
            color: #fff;
            display: block;
            flex-direction: row;
            justify-content: space-around;
        }
        button{
            background: #0000EA !important;
        }
        div.destop-menu{
            display: none;
        }
        div.mobileMenuContent{
            position: relative;
            z-index: 3;
            display: block;
        }
        ul.menu-vertical li{
            display: block;
        }
        ul.menu-vertical li a{
            color: #fff;
            font-size: 18px;
        }
    }
    `;

    const globalResponsiveCss = () =>
    	css([
    		cssResponsive,

    	]);

    export default globalResponsiveCss;

Then, in index.js of component i importe the file : import globalResponsiveCss from '../components/assets/css/responsive'
And tag it : <Global styles={css(globalResponsiveCss)}/>

But the style does not apply. So I would like to know how to do it.

Thank you !

Hi @anohjp09,

Can you please provide a repo or code-sandbox with your code? This is especially helpful to find solutions of technical issues with specific code

Detailing the info suggested here when having issues will help the community to provide the best possible help as quickly and as efficiently as possible.