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 !