jQuery Inline Responsive Plugin Demos

Resize the window and refresh the page to check the result

Use "data-max-width" instead of @Media(max-width: "value"){}

<div class="InlineResponsive" data-max-width='[{"1170":"70%"},{"992":"50%"},{"768":"30%"}]'> </div>

Window Width < 1170 : Element Widht 70%,
Window Width < 992 : Element Widht 50%,
Window Width < 768 : Element Widht 30%

<div class="InlineResponsive" data-max-width='[{"1170":"960px"},{"992":"768px"},{"768":"100%"}]'> </div>

Window Width < 1170 : Element Widht 960px,
Window Width < 992 : Element Widht 50%,
Window Width < 768 : Element Widht 100%

Use "data-min-width" instead of @Media(min-width: "value"){}

<div class="InlineResponsive" data-min-width='[{"768":"50%"},{"992":"60%"},{"1200":"80%"}]'> </div>

Window Width > 768 : Element Widht 50%,
Window Width > 992 : Element Widht 60%,
Window Width > 1200 : Element Widht 80%

<div class="InlineResponsive" data-min-width='[{"768":"740px"},{"992":"960px"},{"1200":"1170px"}]> </div>

Window Width > 768 : Element Widht 740px,
Window width > 992 : Element Widht 960px,
Window width > 1200 : Element Widht 1170px

How To Use:

< script src="inline-responsive.js"> </script>

$.fn.InlineResponsive ({

"class": ".InlineResponsive"

});