0

I've just created a new theme that extends from Magento Blank, and within the file _theme.less I did something like this:

h1 {
  font-size: 24px;
}  

@media (max-width: 768px) {
  h1 {
    font-size: 18px;
  }  
}

@media (max-width: 480px) {
  h1 {
    font-size: 12px;
  }  
}

However, the mobile styles are not being applied. I opened the styles-m.css source code and I found out that the desktop styles are at the bottom, overriding all of the styles above them.

@media (max-width: 480px) {
  h1 {
    font-size: 12px;
  }  
}

@media (max-width: 768px) {
  h1 {
    font-size: 18px;
  }  
}

h1 {
  font-size: 24px;
}

What am I doing wrong here?

Improve this question
0

2 Answers 2

Reset to default
3

You should build your media queries the proper way the Magento UI library expects it as Magento will build a style file for mobile (styles-m.css) and for desktop devices (styles-l.css). I think the issues you currently experience can be traced back to this. You should also approach this in a mobile-first manner. Try this:

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__xs) {
  h1 {
    font-size: 12px;
  }  
}

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
  h1 {
    font-size: 18px;
  }  
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
  h1 {
    font-size: 24px;
  }  
}

This way, the default size is 12px for small mobile devices, everything which is wider than 480px will have 18px and devices wider than 768px will be size 24px. These sizes are defined in lib/web/css/source/lib/variables/_responsive.less. You should definitely read the developer guide on the matter to understand how to effectively use these queries.

Also, make sure Magento 2 is set to development mode!

Improve this answer
4
  • I think the first use of .media-width won't work, as it isn't defined in the original _responsive.less file of Magento 2.
    – Cladiuss
    Aug 17, 2017 at 9:54
  • It definitely works, it's defined in lib/web/css/source/lib/_responsive.less and inherited from that file.
    – TiEul
    Aug 17, 2017 at 9:56
  • The only @extremum = 'min' defined is for @screen__s (for mobile target). The others are defined with @extremum = 'max'. I tried this code, but the case when (@extremum = 'min') and (@break = @screen__xs) doesn't appear in the code.
    – Cladiuss
    Aug 17, 2017 at 12:17
  • You're right! I did not re-read my own response properly because it's over a year old and this slipped my mind back then. I have updated the code so that now it shows what would need to be done in order for it to work as expected in this example.
    – TiEul
    Aug 17, 2017 at 12:41
-2

You can use !important or you can make a seperate css file then declare it in app/frontend/Your_Vendor/Your_theme/Magento_Theme/layout/default_head_blocks.xml like this: 

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
            <css src="css/your_css_file.css" />
        </head>
</page>

and your css file location is: app/frontend/Your_Vendor/Your_theme/web/css/your_css_file.css

Improve this answer
1
  • Thanks for the reply. I know I can use !important, but it shouldn't be necessary. I think I'm missing something related with @media-common or something like that.
    – pinicio
    Oct 19, 2016 at 17:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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