Add support for media queries

  • Resolved seltzdesign

    (@seltzdesign)


    7 years, 10 months ago

    Hi, I just started using your plugin, which seems like a nice and simple way to add custom CSS to all parts of WordPress.

    I just noticed that somehow it doesn’t like media queries. When I add something like:

    @media screen and (max-width: 767px)
.footer-top-widget-area ul.address-info {
    padding: 30px;
}

    After saving it looks like this:

    @media screen and (max-width: 767px)
.footer-top-widget-area ul.address-info {
    
}

    The actual style information is gone and in the source code of the page its added like that as well. Would be great to get this fixed.

    ps: a small thing I noticed is that tags with no . or # in front of them, like header or ul get highlighted in red, even though they are valid.

    Thanks, Armin.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Arun Basil Lal

    (@arunbasillal)

    Hey @seltzdesign,

    You must think that I am very unresponsive, but the truth is that I wasn’t subscribed to the support forum for this plugin. I am just seeing this.

    I see the trouble, both these must be the result of CSSTidy, but before we point fingers, let me take a look and get back to you.

    Regards

    Plugin Author Arun Basil Lal

    (@arunbasillal)

    Armin,

    Isn’t there a syntax error in your input CSS?

    The syntax for media queries is: 

    @media not|only mediatype and (media feature) {
    CSS-Code;
}

    The example you mentioned:

    @media screen and (max-width: 767px)
.footer-top-widget-area ul.address-info {
    padding: 30px;
}

    should be

    @media screen and (max-width: 767px) {
.footer-top-widget-area ul.address-info {
    padding: 30px;
  }
}

    Notice the diff? The CSS you provided is missing the opening bracket after (max-width: 767px)

    ps: a small thing I noticed is that tags with no . or # in front of them, like header or ul get highlighted in red, even though they are valid.

    The syntax error is causing this as well.

    See this screenshot, this will clarify everything: https://i.imgur.com/YsmRrvq.png

    Hope you are still enjoying the plugin.

    Regards,

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Add support for media queries’ is closed to new replies.