Media query option

Yes, you can use media queries in CSS.

On your website, the only CSS code added with the Simple Custom CSS and JS plugin is this. If we take the first CSS rule on the “.divdropdown” element, then it seems to be applied alright.

Here is a screenshot with a screen wider than 1080px and here is a screenshot with a screen narrower than 1080px. In the first screenshot I see the “position: absolute; display: inline-block; padding-top: 6px; width: 50px;” CSS rule applied and in the second screenshot the same CSS rule is missing, just as expected.

It all seems to be working alright. Let me know if I misunderstood something.

Yes is working, the problem came from a syntax error sorry.

Actually I’m trying to add an specific structure according to the device size using jquery in js. For example, to desktop make a dropdown in home, but in mobile, put widget in the drop-down menu.

I use window.matchMedia to identify the screen size but this not work.. any tip??

Regards

The best way to detect the device with JS is the DetectMobileBrowsers library.

You can download the jQuery version of the library, copy/paste the contents in the “Add Custom JS” field and underneath you can check if it’s a mobile device or not with:

if(jQuery.browser.mobile) {
  // put the widget in the drop-down menu
}

Note that this library doesn’t recognize tablets as mobile devices. If you want to include also tablets in your changes, then read the instructions on their About page.