Currently, I am developing a website using Angular 6. One of the components in my project is called our-work.ts
. To set its media query globally, I decided to define it in a file named global.scss
. Here's an example snippet of what I've written:
@media only screen and (max-width: 767px){
.pull-custom-left {
float: none;
}
.popular-work .img-section .hovereffect a, .popular-work .img-section .hovereffect p {
margin-top: 10px;
font-size: 14px;
}
While other styles within the component are working correctly, the media query doesn't seem to be applied as expected. Below is the contents of my our-work component.ts:
@Component({
selector: 'app-our-works',
templateUrl: './our-works-talk.component.html',
styleUrls: ['./our-works-talk.component.scss'],
})