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
    Commented Mar 15, 2017 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
    Commented Mar 16, 2017 at 8:43
  • ah, but it looks like you figured it out.
    – circlesix
    Commented Mar 16, 2017 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
    Commented Mar 16, 2017 at 16:43

1 Answer 1

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
    Commented Mar 16, 2017 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
    Commented Mar 16, 2017 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
    Commented Mar 16, 2017 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
    Commented Mar 16, 2017 at 10:36
  • That's a wise choice :D
    – Ben Crook
    Commented Mar 16, 2017 at 10:41

Your Answer

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

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