CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-designmedia-queries
Dave
Dave

Reputation: 1277

Issues with media queries CSS

Our team is new to responsive design and is trying to code with a mobile first framework. We're trying to use media queries to scale up in screen size, but can't seem to get it to work correctly. This is what our CSS looks like so far:

.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;
  }
}

The result of this looks like this when we set the screen size to exactly 1024px:

enter image description here

When we inspect the div, it looks like both the media queries css for 480px and 1024px are firing. What are we doing incorrect here?

EDIT: adding HTML

<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 href="?id=hri_task_details&table=sn_hr_core_task&sys_id={{task.sys_id}}" id="task_{{$index}}">{{::task.short_description}}</a>-->
          <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>

Upvotes: 0

Views: 343

Answers (2)

JohnH
JohnH

Reputation: 2133

Should the "min-width: 480px" be "max-width: 480px"?

As the CSS is currently defined, once the screen hits the 1024px width, then both min-width conditions are enabled along with the applicable CSS definitions.

Upvotes: 1

nickfindley
nickfindley

Reputation: 310

Try changing your first media query to this:

@media screen and (min-width: 480px) and (max-width: 1023.99px) {
    ...
}

.cards:nth-of-type(3n) and .cards:nth-of-type(even) seem to both be applied.

Upvotes: 1

Related Questions