Trouble with Media Queries

[sansarip]

I'm not sure if I'm doing something wrong or if there's a bug with the media query implementation.

Here's what I tried:

(defclass test-class []
          (at-media {:min-width "200px"}
                    {:margin-left "10em"})
          {:background-color "blue"
           :margin-left "1em"
           :width "4em"
           :height "4em"})

(defcard
  test
  "Testing media queries"
  (fn []
    (sab/html
      [:div {:class (test-class)}])))

Here's what it results in:

The classes work perfectly except for media queries. I've tried all manner of things to get media queries to work, but nothing seems to take effect.

Please advise, thanks!

[dhleong]

Media queries are currently ordered as-is, and for whatever reason the media query does not add specificity to the things inside, so the default "things after in the file override things before" CSS thing is happening here. If you move the at-media below the other map it should work. You can see the CSS that gets generated by looking for the appropriate style element in the head. It should have an ID based on the fully qualified var name in debug mode. I agree it's tempting to reorder media queries to try to handle this but I feel like that might just be trading one source of confusion for another...

…

On Tue, Sep 17, 2019, 9:10 AM sepehr ansaripour ***@***.***> wrote: I'm not sure if I'm doing something wrong or if there's a bug with the media query implementation. Here's what I tried: (defclass test-class [] (at-media {:min-width "200px"} {:margin-left "10em"}) {:background-color "blue" :margin-left "1em" :width "4em" :height "4em"}) (defcard test "Testing media queries" (fn [] (sab/html [:div {:class (test-class)}]))) Here's what it results in: [image: devcard] <https://camo.githubusercontent.com/0c8663cdb78a20a2dc203def2a405b8753230f19/68747470733a2f2f692e6779617a6f2e636f6d2f34356262363364656434633639623665376439616536666162343665343832392e706e67> The classes work perfectly except for media queries. I've tried all manner of things to get media queries to work, but nothing seems to take effect. Please advise, thanks! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#6?email_source=notifications&email_token=AAGHIFR4IYPG44PSWCUH4P3QKDJLHA5CNFSM4IXPXVP2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4HL3G5NQ>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAGHIFS67UJPPZW4RUNRDHDQKDJLHANCNFSM4IXPXVPQ> .

[sansarip]

Hey, thanks for the speedy reply!

So as you suggested I reordered the arguments as follows:

(defclass test-class []
          {:background-color "blue"
           :margin-left "1em"
           :width "4em"
           :height "4em"}
          (at-media {:min-width "200px"}
                    {:margin-left "10em"}))

Unfortunately, that did not affect anything visually on the page.

Looking at the generated css it makes sense as to why nothing happened - the media query isn't selecting anything to apply the margin-left attribute to:

.my-website-cards-home-test-class {
  background-color: blue;
  margin-left: 1em;
  width: 4em;
  height: 4em;
}

@media (min-width: 200px) {

  margin-left: 10em;

}

I tried giving the media-query the generated class name:

(defclass test-class []
          {:background-color "blue"
           :margin-left "1em"
           :width "4em"
           :height "4em"}
          (at-media {:min-width "200px"}
                    [".my-website-cards-home-test-class"
                     {:margin-left "10em"}]))

But that resulted in unexpected css - you can see that the class gets selected twice:

.my-website-cards-home-test-class {
  background-color: blue;
  margin-left: 1em;
  width: 4em;
  height: 4em;
}

@media (min-width: 200px) {

  .my-website-cards-home-test-class .my-website-cards-home-test-class {
    margin-left: 10em;
  }

}

If I manually remove one of the duplicate .my-website-cards-home-test-class selectors from the media query via the browser debugger, then it works as expected.

I must be going about this the wrong way or something 😖 ! Please advise.

[dhleong]

Huh. Okay you're right there's definitely a bug. I just fired up the demo and it looks like you should be able to put at-media at the beginning (it does already get ordered after in the generated CSS) but the generated media query is always missing the class name.

Here's a workaround for now:

(defclass test-class []
  (at-media {:min-width "200px"}
     [:& {:margin-left "10em"}])
  {:background-color "blue"
   :margin-left "1em"
   :width "4em"
   :height "4em"})

Thanks for the report by the way!

[dhleong]

Okay after looking into this, it appears that garden doesn't actually support nesting media queries inside classes just yet. See noprompt/garden#171 for the relevant issue. I may be able to fake it for now by just automatically wrapping the body of an at-media in that [:&] syntax however. I'll play with it a bit

[dhleong]

Released v1.0.2 that fixes this issue. Thanks again :)