Skip to main content

10 jQuery Plugins to help with Responsive Layouts

By Sam Deering



Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

Responsive layout in web design is an important topic of discussion at the moment. Basically a responsive layout allows you to offer a specific and optimized screen size based on whatever device (mobile, tablet…) the visitor uses. Typically, you would use Media Queries to resize the overall layout, but navigation, forms, images, sliders, carousels… they all need to be optimized as well. This is why we are giving you our collection of 10 jQuery plugins that will help you optimize and resize those trickier web elements. Have fun!

Related Posts:

1. The Heads-Up Grid

Built with HTML, CSS & JavaScript. The Heads-Up Grid is a responsive overlay grid for in-browser website development. It has been created to make it relatively easy to adapt to the needs of responsive web design.

The Heads-Up Grid

Source + Demo

2. FitVids.JS

Is a lightweight, easy-to-use jQuery plugin for responsive width video embeds. It automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design.


Source + Demo

3. AdaptiveMedia

With AdaptiveMedia, you need only one CSS file for any window sizes, no need LESS or same solutions, no need CSS3 Media Queries. Less than 3KB, HTML5 and IE6 compatible. User callback: execute user function before completed all job.



4. rlightbox

Is a jQuery UI mediabox that can display many types of content such as images, YouTube and Vimeo videos. It has many unique features like Panorama and Live Re-size and like other jQuery UI widgets, it is ThemeRoller ready.


Source + Demo

5. Elastislide

Is a responsive jQuery carousel that will adapt its size and its behavior in order to work on any screen size.



6. Responsive Image Gallery with Thumbnail Carousel

Using the Elastislide plugin (above), this technique will show you how to implement a responsive gallery that adapts to the view-port width. The gallery will has a view switch that allows you to view it with the thumbnail carousel or without. It also supports keyboard navigation.

Responsive Image Gallery with Thumbnail Carousel


7. Seamless Responsive Photo Grid

Maintains the aspect ratio of your images.

eamless Responsive Photo Grid


8. Responsive jQuery Slideshow

This example makes it possible to have fluid jQuery slideshow which scales responsively. This is the same method which is used on the new

Responsive jQuery Slideshow


9. wmuSlider

Please keep in mind that it’s still very raw (really) and under the MIT LICENSE, which basically means: break it, steal it but THE STUFF IS PROVIDED “AS IS”!



10. Doubletake

Intended to be a proof of concept, Doubletake is a plugin that dynamically updates the src of your images based on the browser width. You start with a small, mobile-friendly image in your HTML. Doubletake will then use a defined set of breakpoints to update image SRCs when necessary.


Source + Demo

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Learn how Git works, and how to use it to streamline your workflow!

Google, Netflix and ILM are Python users. Maybe you should too?