Magento 2.2: How to apply breakpoints in custom .less files

Question

• Magento 2.2.3
• Ubuntu 16.04 Server VM using VirtualBox with icewm window manager
• Apache 2.4
• MySQL 14.14
• PHP 7.0
• Custom theme which inherits from Magento/blank

I have a custom .phtml file:

Vendor/theme/Magento_Theme/templates/html/new_products.phtml

<div class="new-products-banner-container">
    <div class="new-products-banner">
        <h1 class="new-products-banner-title">NEW RELEASES</h1>
    </div>
</div>
<?php echo $this->getLayout()
            ->createBlock("Magento\Catalog\Block\Product\Widget\NewWidget")
            ->setProductsCount("10")
            ->setTemplate("product/widget/new/content/new_grid.phtml")
            ->toHtml();
?>

The block inherits styles perfectly well when written outside of any media query, however I can use neither the .media-width mixin, nor a CSS @media query to separate mobile/desktop styles.

When placing these styles within media queries, the default styles are applied. I have tried various configurations within the .less file and its current state is as follows:

Vendor/theme/Magento_Theme/web/css/new_products.less

//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .new-products-banner-container {
        width: 100%;
        height: 53px;
        z-index: 1;
    }
    .new-products-banner {
        width: 100%;
        max-width: 1280px;
        height: 100%;
        margin: 0 auto;
    }
    .new-products-banner-title {
      margin-bottom: 0;
    }
    .block-title {
      display: none;
    }
    .block-new-products {
      margin-top: 10px;
    }
}

//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .new-products-banner-container {
        width: 100%;
        height: 53px;
        z-index: 1;
    }
    .new-products-banner {
        width: 100%;
        max-width: 1280px;
        height: 100%;
        margin: 0 auto;
    }
    .new-products-banner-title {
      margin-bottom: 0;
      line-height: 2;
    }
    .block-title {
      display: none;
    }
    .block-new-products {
      margin-top: 10px;
    }
}

//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .new-products-banner-container {
        width: 100%;
        height: 53px;
        z-index: 1;
    }
    .new-products-banner {
        width: 100%;
        max-width: 1280px;
        height: 100%;
        margin: 0 auto;
    }
    .new-products-banner-title {
      margin-bottom: 0;
      line-height: 1.25;
    }
    .block-title {
      display: none;
    }
    .block-new-products {
      margin-top: 10px;
    }
}

Note:

I am aware that styles needn't be repeated for mobile/desktop views when they are included in the common view, however even these measures do not ensure that the CSS is rendered.

Answer 1

Problem is that there is no less fail that imports your custom less file.

For example you could move blank theme module LESS file under your theme one

Vendor/theme/Magento_Theme/web/css/source/_module.less then move example your custom file into Vendor/theme/Magento_Theme/web/css/source folder and in _module.less add inport line @import 'new_products.less'; after that setup:upgrade and it should be fine. Sry about my english, hope it helps

Answer 2

I had to style the block using CSS media queries and writing plainly all the code which would be included in the common media query.

If anyone is able to provide a solution which utilises magento's own mixins properly then I will gladly accept their answer over my own, as this solution is not proper usage.

.new-products-banner-container {
  width: 100%;
  height: 53px;
  z-index: 1;
}
.new-products-banner {
  width: 100%;
  max-width: 1280px;
  height: 100%;
  margin: 0 auto;
}
.new-products-banner-title {
  padding-left: 10px;
  margin-bottom: 0;
}
.block-title {
  display: none;
}
.block-new-products {
  margin-top: 10px;
}

//
//  Mobile
//  _____________________________________________

@media all and (max-width : 767px) {
  .new-products-banner-title {
    line-height: 2;
  }
}

//
//  Desktop
//  _____________________________________________

@media all and (min-width : 768px) {
  .new-products-banner-title {
    line-height: 1.25;
  }
}