Implementing a new CSS mixin media query

First of all, let's take a look at the current mobile version of the CompStore theme. Using Chrome DevTools or Responsive Web Designer Tester, select an Apple iPhone 5 (portrait) device to test the site. You will probably be redirected to home page:

In spite of the previous adjustment in the CompStore theme, when a mobile device accesses a theme, CSS rules don't apply some important features, such as colors and the positioning of elements. As a suggestion, let's create a standard declaration of color approach and configure CSS to show only one product when the mobile device accesses the site. How can we implement these new features? Using media queries, of course!

In your favorite code editor, open the compstore.less file available under the app/design/frontend/Packt/compstore/web/css/source directory and use the following CSS 3 code:

@color-compstore: #F6F6F6;

body{
  background: @color-compstore;
}

.media-width(@extremum, @break) when (@extremum...