I'm working with this organizational chart https://codepen.io/erinesullivan/pen/LLoXoL. Basically what I want to do is to use the css classes inside the media query if a condition is true. Any easy way to do it? This is what the classes I have to use if the condition is true look like.
@media only screen and ( min-width: 64em ) {
ol.organizational-chart {
margin-left: -1em;
margin-right: -1em;
}
/* PRIMARY */
ol.organizational-chart > li > div {
display: inline-block;
float: none;
margin: 0 1em 1em 1em;
vertical-align: bottom;
}
ol.organizational-chart > li > div:only-of-type {
margin-bottom: 0;
width: calc((100% / 1) - 2em - 4px);
}
ol.organizational-chart > li > div:first-of-type:nth-last-of-type(2),
ol.organizational-chart > li > div:first-of-type:nth-last-of-type(2) ~ div {
width: calc((100% / 2) - 2em - 4px);
}
ol.organizational-chart > li > div:first-of-type:nth-last-of-type(3),
ol.organizational-chart > li > div:first-of-type:nth-last-of-type(3) ~ div {
width: calc((100% / 3) - 2em - 4px);
}
ol.organizational-chart > li > div:first-of-type:nth-last-of-type(4),
ol.organizational-chart > li > div:first-of-type:nth-last-of-type(4) ~ div {
width: calc((100% / 4) - 2em - 4px);
}
ol.organizational-chart > li > div:first-of-type:nth-last-of-type(5),
ol.organizational-chart > li > div:first-of-type:nth-last-of-type(5) ~ div {
width: calc((100% / 5) - 2em - 4px);
}
/* SECONDARY */
ol.organizational-chart > li > ol {
display: flex;
flex-wrap: nowrap;
}
ol.organizational-chart > li > ol:before,
ol.organizational-chart > li > ol > li:before {
height: 1em!important;
left: 50%!important;
top: 0!important;
width: 3px!important;
}
ol.organizational-chart > li > ol:after {
display: none;
}
}
Thank you.
such expressions are suitable for this task:
window.matchMedia("(min-width: 500px)");
for check:
const mq = window.matchMedia( "(min-width: 500px)" );
if (mq.matches) {
console.log('window width is at least 500px');
} else {
console.log('window width is less than 500px')
}