1

Hi I'm adapting a Luma based theme. So I created the file _extend.less in

app/frontend/design/MyTemplate/theme_new/web/css/source/

In that file I have:

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m){
    .page-header {
        background:#f0bd70;
    } }

And also tried:

@media only screen and (min-width: 768px) {
    .page-header {  border: 0;  margin-bottom: 0;   height: 120px;  background-color: #73C70F ; } }

Both are not working?

I also have included:

.page-header {
    height: 250px;
    background-color: #73C70F ;
}

Which works fine.

So what am I doing wrong?

I use client side Compilation Module. I know css but are not familiar with less unfortunately. So how to get a media query to work in Magento2 Theme?

2

If your following code in _extend.less working fine...

.page-header {
    height: 250px;
    background-color: #73C70F ;
}

Then just make sure your code inside media query isn't override by some other media query (Check in inspect elements). Or try with !important for testing purpose.

@media only screen and (min-width: 768px) {
    .page-header {  
       border:1px solid red !important;
       background-color: #73C70F !important;
     }
}

If above code is working fine then surely other code is overriding your media query code for class .page-header

1
  • Hi tried the red border one with !important; Than I saw that I needed to have @media only screen and (max-width: 768px) having this applied to the smaller screen only. Also made sure that the query was below the .page-header css. Now its even working without the !important part added. – mr_typo3 Sep 23 '16 at 13:23

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.