Playing around with adding CSS Grid styling to an old Angular 6 app. I have a media query that is not firing and I'm wondering if it has something to do with angular and its hierarchy of CSS rules.
Problem: Under 750px media query should fire - change grid layout. Doesn't work.
Using dev tools I've manually changed the repeat on the CSS grid and it works, but no matter what I do - even changing it to !important, the media query never fires.
CSS:
media (max-width:750px){
.wrapper{
width:100%;
display:grid;
height:auto;
grid-template-columns: 1fr; <-------doesn't fire
}
.event-box{
grid-template-columns: repeat(1, 1fr) . <-------doesn't change
}
}
.wrapper {
font-size: 13.5px;
line-height: 1.2em;
box-sizing: border-box;
width: 100%;
font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica,
Arial, sans-serif;
min-height:1000px;
height:auto;
display:grid;
grid-gap: 1em;
grid-template-columns: 1fr 4fr; <---------doesn't stop on mobile
grid-auto-rows: minmax(50px, auto);
text-align: center;
background: #f9f3d8;
box-shadow: 0 0 1.5em #867453;
}
.event-box{
padding-top:2%;
display:grid;
grid-gap: 1em;
grid-template-columns:repeat(3, 1fr); <-----fires regardless
grid-auto-rows:minmax(25%, auto)
}
@Component({
selector: 'app-day',
templateUrl: './day.component.html',
styleUrls: ['./day.component.css']
})
<div class="banner-image" >
<h1 class="banner-text">WELCOME TO THE JUNGLE </h1></div>
<div class="wrapper">
<div class="side-box">
<div class="party-info-box box red-text-lg">
<div class="box-shade"></div>
<p>Food: {{partyFood}}</p>
<p>Water: {{partyWater}}</p>
<p>Space: {{partySpace}}</p>
</div>
<div class="dm-controls-box red-text-lg box">
<div class="box-shade"></div>
<label>Food per day:</label>
<input [(ngModel)]="this.dailyFood" placeholder="change food consumption rate">
<br>
<label>Water per day:</label>
<div>
<input [(ngModel)]="this.dailyWater" placeholder="change water consuption rate">
</div>
<div>
<label>Edit Food: </label>
<input placeholder="change food supply" [(ngModel)]="partyFood">
<br>
<label>Edit Water: </label>
<input placeholder="change food" [(ngModel)]="partyWater">
</div>
</div>
</div>
<div class="content-box">
<div class="top-box ">
<div class="weather-box box red-text-lg" >
<p>Welcome to the jungle</p>
<div class="red-border"></div>
<p class="black-text">Select a location to see what happens today</p>
<ng-container *ngFor="let weather of this.weather; let i = index" class="black-text">
<div class="black-text">
<h2 class="red-text-lg">{{weatherLabelArr[i]}} Weather: {{this.weather.title}}</h2>
<p>{{this.weather.text}}</p>
</div>
</ng-container>
</div>
<div class="day-buttons-box box red-text-lg">
<h3>Select Location</h3>
<div class="button-box">
<button class="button" (click)="getBeach();">Beach</button>
<button class="button" (click)="getNoUndead();">NoUndead</button>
<button class="button"(click)="getUndead();">Undead
Jungle</button>
<button class="button" value="greaterUndead()" (click)="getGreaterUndead();">Greater
Undead
Jungle</button>
<button class="button"value="river" (click)="getRiver()">River</button>
<button class="button"value="river" (click)="getSwamp()">Swamp</button>
<button class="button"(click)="this.undeadService.getCurrentMonster('Guard')">test button</button>
</div>
</div>
</div>
<div class="main-box">
<div *ngIf="this.rollResults; else noResults" class="event-box">
<ng-container *ngFor="let result of this.rollResults">
<ng-container *ngIf="result.title red-text-lg">
<div class="event-card">
<div class="event-title red-text-lg">
<h3>{{result.title}}</h3>
<div class="red-border"></div>
</div>
<div class="event.text black-text">
<p>{{result.text}}</p>
</div>
</div>
</ng-container>
</ng-container>
<ng-template #noResults>
<p>Nothing Happened.....</p>
</ng-template>
</div>
</div>
</div>
</div>
At first as aleady mentioned in the comments you've forgotten the @
in front of media
.
After fixing this you have to overwrite your conflicting CSS rules using !important
.
And on your @media
-> .event-box
-> grid-template-columns
was a .
instead of ;
.
To learn more about the
!important
exception, take a look at the documentation of specificity.
The following CSS should do the trick:
@media(max-width:750px) {
.wrapper {
width: 100%;
display: grid;
height: auto;
grid-template-columns: 1fr !important; // '!important' to overwrite
}
.event-box {
grid-template-columns: repeat(1, 1fr); // changed '.' to ';' and '!important' to overwrite
}
}
.wrapper {
font-size: 13.5px;
line-height: 1.2em;
box-sizing: border-box;
width: 100%;
font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
min-height: 1000px;
height: auto;
display: grid;
grid-gap: 1em;
grid-template-columns: 1fr 4fr;
grid-auto-rows: minmax(50px, auto);
text-align: center;
background: #f9f3d8;
box-shadow: 0 0 1.5em #867453;
}
.event-box {
padding-top: 2%;
display: grid;
grid-gap: 1em;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(25%, auto)
}