Our team is currently delving into the realm of responsive design and experimenting with a mobile-first framework. In an attempt to utilize media queries to adjust our layout based on screen size, we have crafted the following CSS:
.flex, .cards, .card {
display: flex;
}
.flex {
flex-wrap:wrap;
}
.cards, .card {
align-items:center;
}
.cards {
padding: 1em;
background-color: $color-lightest;
box-shadow: 0px 1px 22px 4px rgba(0, 0, 0, 0.07);
}
@media screen and (min-width: 480px) {
.cards {
width: 49%;
margin: 1%;
}
.cards:nth-of-type(even) {
margin-right: 0;
}
.cards:nth-of-type(odd) {
margin-left: 0;
}
}
@media screen and (min-width: 1024px) {
.cards {
width: 32%;
margin: 1%;
}
.cards:nth-of-type(3n) {
margin-right: 0;
}
.cards:nth-of-type(3n+1) {
margin-left: 0;
}
}
Upon setting the screen size precisely to 1024px, the outcome appears as follows:
https://i.stack.imgur.com/5XU99.png
Upon inspecting the div element, it seems that both the media query styles for 480px and 1024px are being applied concurrently. What might we have overlooked in our implementation?
EDIT: I am including the HTML used as well
<div class="flex" ng-init="init(user.sys_id)">
<div class="cards" ng-repeat="task in data.tasks | orderBy: ['order']" >
<div class="card" ng-click="c.onWidget(task);">
<i ng-if="task.finished" class="{{task.icon}} fa-5x card-img finished" aria-hidden="true"></i>
<i ng-if="!task.finished && task.isOverDue" class="{{task.icon}} fa-5x card-img overdue" aria-hidden="true"></i>
<i ng-if="!task.finished && !task.isOverDue" class="{{task.icon}} fa-5x card-img pending" aria-hidden="true"></i>
<div class="card-content">
<h4>
<a ng-click="">{{::task.short_description}}</a>
</h4>
<span ng-if="!task.finished">
<span class="text-normal" ng-if="task.due_date">${Due by} {{::task.due_date | date: 'mediumDate' }}
<span class="text-warning" ng-if="task.isOverDue"> (${Overdue})</span>
</span>
</span>
<span ng-if="task.finished" class="text-muted">${Completed at} {{::task.closed_at | date: 'mediumDate'}}</span>
</div>
<div>
<i alt="${Open}" ng-if="!task.finished && task.isOverDue" class="m-l-sm fa fa-square-o fa-2x overdue"></i>
<i alt="${Open}" ng-if="!task.finished && !task.isOverDue" class="m-l-sm fa fa-square-o fa-2x pending"></i>
<i alt="${Completed}" ng-if="task.finished" class="m-l-sm fa fa-check-square-o fa-2x finished"></i>
</div>
</div>
</div>
</div>