3

I'm trying to add a simple responsive grid into magento 2 by adding it into an additional stylesheet.

This does work on mobiles and when using inspect element in chrome however if I do not inspect element and resize the chrome window to test a narrow viewport below 767px the rule is not applied. This is making is very hard for me to diagnose because as soon as i click inspect element everything starts working as expected.

Example rule:

@media all and (max-device-width : 767px) {
    .col-4 {
        width: 100%;
        border-right:0px;
    }
}
4
  • unless i'm misunderstanding your question, that is exactly how it should be working. If the browser view is less then 767px, the style will not show in the inspector. If you want to above the size (higher then 767px) that you need to use @media all and (min-device-width : 767px) – circlesix Mar 15 '17 at 17:02
  • Sorry wrote that question quite sloppily. I am resizing the chrome window to a very narrow viewport to test the media rules. When resizing the window to less than 767px this rule is not applied unless i open inspect element then it suddenly gets applied. – harri Mar 16 '17 at 8:43
  • ah, but it looks like you figured it out. – circlesix Mar 16 '17 at 15:23
  • 1
    Yes thanks for your help! In the end i am unsure still but thanks to firefox inspect element being consistent and showing me what was going on (unsure what was going on in chrome) the rule was getting overwritten by a previous rule which I have now fixed by having the previous rules only apply to desktop. Cheers – harri Mar 16 '17 at 16:43
4

I'm not entirely sure what your problem/question is?

I'm going to presume you mean your grid is only working on mobile and when you have inspect element open.

This is exactly what you're code is informing the browser to do, when the browser is 767px or under .col-4 will be fully width. When it's over 767px it will either do nothing or fall back to the original styling.

I'll take a guess that you have your inspect element panel attached to the side of your browser? This will cause the browser window to narrow hence why the media query is applying.

If you want this CSS to apply at all times just remove the media query like so:

.col-4 {
    width: 100%;
    border-right:0px;
}

Related notes

If you're using the default LESS styling for Magento 2 there are already media queries you can use:

//
//  Common (Both desktop and mobile)
//  _____________________________________________
& when (@media-common = true) {

}


//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {

}

//
//  Tablet
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {

}

//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {

}

Also, I would avoid using max-device-width unless you know this is exactly what you need. For almost all use cases max-width is what you want. See here for more info.

5
  • Ok yeah i will try remaking the grid in less and see how that goes. But yeah my media queries just do not work in firefox or chrome on desktop when resized to very narrow viewports. I don't want the media queries to be on permanently i was just resizing the windows to test that the rules worked. – harri Mar 16 '17 at 8:33
  • Ok i managed to figure it out as firefox inspect element wasnt fixing things. I had set all my normal rules for desktop outside of a medie query and these were overwriting the mobile rules. I thought the media queries would overwrite them if they were were later than them in the css. Thanks for your help i have moved it all over to less in the seperate magento media queries like you suggested however and it is all working perfectly now. Thanks for your help. – harri Mar 16 '17 at 9:49
  • Glad I could help. If a media query is AFTER the standard code it should overwrite the standard code, if it isn't I suspect there specificity is higher in the standard code (less classes maybe) or something funky is going on. If you used a standard media query inside an M2 less file I suspect it's because the CSS from normal media queries are rendered AFTER the LESS media queries. If you want to check it out view the compiled .css file. – Ben Crook Mar 16 '17 at 10:00
  • Yeah i am finding it odd especially when it worked when inspecting element. It was the same specificity, later in the css, there were no !important tags or anything and this was just in a non compiled css file added into the head. Thanks again however i'm preferring using the LESS wanted to move it in there and use the Magento rules suggested at some point. – harri Mar 16 '17 at 10:36
  • That's a wise choice :D – Ben Crook Mar 16 '17 at 10:41

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.