0
  • 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.

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

  • Sorry I don't think you understood the question properly. The file is imported perfectly fine. I know this because, when I write the styles plainly, without any media queries, then they are applied. The styles I use rely upon LESS mixins, so they wouldn't be working whatsoever if there were any problem importing the file I'm using. See my working answer for more clarity. – Joshua Flood May 15 '18 at 20:41
  • 1
    trust me, just try it out and let me know if it wont work :) – K-s May 16 '18 at 5:27
  • Sorry for the slow response. Yeah I don't know what I was thinking when I read that the first time. Guess I was tired :P. Thanks! – Joshua Flood May 18 '18 at 16:37
  • Sorry to take back the tick, but my magento system.log is displaying named argument for <argument_name> not found when I follow your instructions. – Joshua Flood May 23 '18 at 22:30
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.