apply media query in html code which is being bound by innerHtml

I need to add media query to a piece of HTML code which is being bound by innerHtml For example -

<div class="end-timer-value" [innerHtml]="timerValue"></div>


and this timerValue gets returned from a service, something like -

str = `
<div class="timer-outer-wrapper" style="display:flex">
<div style="padding: 5px 16px;">Ends in: </div>
<div class="hours-wrapper" style="display:flex; flex-direction:column;">
<div>${hoursLeft}</div>
<div id="hours" style="font-size: 16px; font-family: 'Roboto'; font-weight: 400; line-height: 24px; letter-spacing: 0.01em; text-align: left; margin-top: -5px;">&nbsp;&nbsp;hrs</div>
</div>
<div style="padding: 5px 16px;">:</div>
<div class="mins-wrapper" style="display:flex; flex-direction:column;">
<div>${minutesLeft}</div>
<div id="minutes" style="font-size: 16px; font-family: 'Roboto'; font-weight: 400; line-height: 24px; letter-spacing: 0.01em; text-align: left; margin-top: -5px;">&nbsp;&nbsp;min</div>
</div>
<div style="padding: 5px 16px;">:</div>
<div class="secs-wrapper" style="display:flex; flex-direction:column;">
<div>${remainingSeconds}</div>
<div id="seconds" style="font-size: 16px; font-family: 'Roboto'; font-weight: 400; line-height: 24px; letter-spacing: 0.01em; text-align: left; margin-top: -5px;">&nbsp;&nbsp;sec</div>
</div>
</div>`;
timerValue = this.sanitizer.bypassSecurityTrustHtml(str);


I have tried to add the following media query code in the main scss file but it doesn't work -

div.end-timer-value {
div.timer-outer-wrapper {
div.hours-wrapper {
#hours {
margin-left: 0px;
}
@media screen and (max-width: 1360px) {
#hours {
margin-left: -6px;
}
#minutes {
margin-left: -5px;
}
#seconds {
margin-left: -5px;
}
}
@media screen and (max-width: 1190px) {
#hours {
margin-left: -10px;
}
#minutes {
margin-left: -10px;
}
#seconds {
margin-left: -10px;
}
}
}
}
}


Also, just an additional information, this is some sort of timer which is put under setInterval, so if you provide a solution, please keep that in mind, I hope that doesn't change anything related to media query working.

Any help would be appreciated. Thanks!

Continue reading...