Title: Make this plugin responsive Last modified: August 20, 2016 --- # Make this plugin responsive * [ghleor](https://wordpress.org/support/users/ghleor/) * (@ghleor) * [13 years, 5 months ago](https://wordpress.org/support/topic/make-this-plugin-responsive-1/) * Hi, very useful plugin. I’m using Reponsive Theme and I would like to know how can I make this plugin responsive. I would like that 3 columns I’ve made become into 1 column (one underneath the other) when screen is smaller than 650px I’ve written this code in wp-ez-column.css * ``` @media screen and (max-width: 650px), @media screen and (max-width: 480px), @media screen and (max-width: 320px), @media screen and (max-width: 240px) { .wpcol-one-quarter, .wpcol-one-half, .wpcol-three-quarter, .wpcol-one-third, .wpcol-two-third, .wpcol-one-fifth, .wpcol-two-fifth, .wpcol-three-fifth, .wpcol-four-fifth { width: 100%; margin-bottom: 0; margin-right: 0; } } ``` * It makes responsive to Firefox but not to Safari, what can I do? * [http://wordpress.org/extend/plugins/easy-columns/](http://wordpress.org/extend/plugins/easy-columns/) Viewing 15 replies - 1 through 15 (of 22 total) 1 [2](https://wordpress.org/support/topic/make-this-plugin-responsive-1/page/2/?output_format=md) [→](https://wordpress.org/support/topic/make-this-plugin-responsive-1/page/2/?output_format=md) * [Eric753](https://wordpress.org/support/users/eric753/) * (@eric753) * [13 years, 5 months ago](https://wordpress.org/support/topic/make-this-plugin-responsive-1/#post-3236537) * Similar issue here so I’m interested in the solution for this. I can reduce my frame size by about 50% and then the text jumps through the left margin if I reduce further. [Site link](http://maryrex.com) * Thanks for your support! Love the flexibility of the plugin! * [Jason75](https://wordpress.org/support/users/jason75/) * (@jason75) * [13 years, 3 months ago](https://wordpress.org/support/topic/make-this-plugin-responsive-1/#post-3236619) * If you add !important; to the width (width: 100% !important;) this will work. To make sure that a property is always applied, add the !important property to the tag. * My CSS: * /* Landscape phone to portrait tablet */ [@media](https://wordpress.org/support/users/media/)( max-width: 767px) { .wpcol-one-third { width: 100% !important; } } * Displays beautifully as 1 column in Safari on iPhone 5 * [NeilSmart](https://wordpress.org/support/users/neilsmart/) * (@neilsmart) * [13 years ago](https://wordpress.org/support/topic/make-this-plugin-responsive-1/#post-3236629) * Sorry to post here but I just a quick question will this work for most browsers? Chrome Firefox etc. Thanks. * [Jason75](https://wordpress.org/support/users/jason75/) * (@jason75) * [13 years ago](https://wordpress.org/support/topic/make-this-plugin-responsive-1/#post-3236630) * Havent tested on browsers Chrome and Firefox. Please test, let me know: [http://www.hairhelp.com.au/price-list/](http://www.hairhelp.com.au/price-list/) * [NeilSmart](https://wordpress.org/support/users/neilsmart/) * (@neilsmart) * [13 years ago](https://wordpress.org/support/topic/make-this-plugin-responsive-1/#post-3236631) * Hi also if I add the code above it makes all the columns stack onto top even in a normal size screen ( monitor). How can I fix this. * [Jason75](https://wordpress.org/support/users/jason75/) * (@jason75) * [13 years ago](https://wordpress.org/support/topic/make-this-plugin-responsive-1/#post-3236632) * Sorry, not to sure. I copied the easy-columns/css/wp-ez-columns.css style contents and placed it at the bottom of the style.css sheet, directly underneath the ** above** [@media](https://wordpress.org/support/users/media/) css style. * Give it a try * Cheers * [adriesilva](https://wordpress.org/support/users/adriesilva/) * (@adriesilva) * [13 years ago](https://wordpress.org/support/topic/make-this-plugin-responsive-1/#post-3236633) * for me the 1/3rd columns line up on top of each other. * [adriesilva](https://wordpress.org/support/users/adriesilva/) * (@adriesilva) * [13 years ago](https://wordpress.org/support/topic/make-this-plugin-responsive-1/#post-3236634) * I got it! Just place this code into the Easy Column’s css style sheet.. i placed mines at the bottom of the stylesheet: * [@media](https://wordpress.org/support/users/media/) (max-width: 600px) { .wpcol- one-third { position: relative!important; } .wpcol-one-third { float: none!important; width: auto!important; } } * should work with all broswers * [NeilSmart](https://wordpress.org/support/users/neilsmart/) * (@neilsmart) * [13 years ago](https://wordpress.org/support/topic/make-this-plugin-responsive-1/#post-3236635) * hi got it working with. thanks all. [@media](https://wordpress.org/support/users/media/)( max-width: 600px) { .wpcol-one-quarter, .wpcol-one-half, .wpcol-three-quarter,. wpcol-one-third, .wpcol-two-third, .wpcol-one-fifth, .wpcol-two-fifth, .wpcol- three-fifth, .wpcol-four-fifth { width: 100%; margin-bottom: 0; margin-right: 0; position: relative!important; } } * [signalfilms](https://wordpress.org/support/users/signalfilms/) * (@signalfilms) * [13 years ago](https://wordpress.org/support/topic/make-this-plugin-responsive-1/#post-3236636) * Hello, * I love easy columns its a great plugin. I’m really struggling to make them responsive though too. I’m a bit of an amateur and don’t really know what I’m doing when I’m editing css sheets! Can any help me to do it in laymans terms. * This is what I tried to do * Dashboard – plugins – Easy Colum ‘edit’ – Down the right hand side under ‘Plugin Files’ I chose the one at the bottom called ‘easy-columns/css/wp-ez-columns.css’ * At the top it says * Editing easy-columns/css/wp-ez-columns.css (inactive) * Is this right? seems strange to be inactive. * Then I tried pasting some of the suggestions above at the bottom of the sheet underneath everything then refreshed. * It doesn’t seem to make any difference to my columns. You can see an example here * [http://www.signalfilmandmedia.com/current/projects/](http://www.signalfilmandmedia.com/current/projects/) * When you make the screen smaller the columns overlap writing goes over the pictures. * Any help would be much appreciated * [Glen Thomson](https://wordpress.org/support/users/glenthom/) * (@glenthom) * [13 years ago](https://wordpress.org/support/topic/make-this-plugin-responsive-1/#post-3236637) * [@neilsmart](https://wordpress.org/support/users/neilsmart/) – Legend! You just made my life infinitely easier, thank-you! * [@signalfilms](https://wordpress.org/support/users/signalfilms/) – You seem to be on the right track, don’t worry about it being ‘inactive’. Did you clear your cache after you pasted in the css from above? * [signalfilms](https://wordpress.org/support/users/signalfilms/) * (@signalfilms) * [13 years ago](https://wordpress.org/support/topic/make-this-plugin-responsive-1/#post-3236638) * [@glenthom](https://wordpress.org/support/users/glenthom/) its working!! must have been my cache! Thanks thats amazing * [deargeek](https://wordpress.org/support/users/deargeek/) * (@deargeek) * [12 years, 9 months ago](https://wordpress.org/support/topic/make-this-plugin-responsive-1/#post-3236639) * Little update to this, since the upgrade to 2.1 you will need this code instead: * ``` @media (max-width: 600px) { .ezcol-one-quarter, .ezcol-one-half, .ezcol-three-quarter, .ezcol-one-third, .ezcol-two-third, .ezcol-one-fifth, .ezcol-two-fifth, .ezcol-three-fifth, .ezcol-four-fifth { width: 100%; margin-bottom: 0; margin-right: 0; position: relative!important; } } ``` * Pat, is there any way this could be added as an option in the plugin? I do hate editing plugin files, as the changes are so easily undone. * Plugin Author [Pat Friedl](https://wordpress.org/support/users/kcfried/) * (@kcfried) * [12 years, 9 months ago](https://wordpress.org/support/topic/make-this-plugin-responsive-1/#post-3236640) * I’m actually working on the finishing touches to 2.1.1 as I type. I was wondering what I’d be able to do with the column widths to make them truly responsive since they can vary in width. So the common consensus is we go 100% width at max-width 600? * I was going to make the CSS take all columns to 50% at max-width 768 and 100% at 480. will this work? * Plugin Author [Pat Friedl](https://wordpress.org/support/users/kcfried/) * (@kcfried) * [12 years, 9 months ago](https://wordpress.org/support/topic/make-this-plugin-responsive-1/#post-3236641) * Here’s my proposal guys: * ``` .ezcol>* { /* parent class added to all columns. keeps all content from overflowing*/ max-width: 100%; } @media all and (max-width: 768px) { .ezcol-one-quarter, .ezcol-one-half, .ezcol-three-quarter, .ezcol-one-third, .ezcol-two-third, .ezcol-one-fifth, .ezcol-two-fifth, .ezcol-three-fifth, .ezcol-four-fifth { width: 48% !important; margin-right: 2%; } } @media all and (max-width: 480px) { .ezcol-one-quarter, .ezcol-one-half, .ezcol-three-quarter, .ezcol-one-third, .ezcol-two-third, .ezcol-one-fifth, .ezcol-two-fifth, .ezcol-three-fifth, .ezcol-four-fifth { width: 100% !important; margin-right: 0; } } ``` * Let me know if that works and I’ll release an update. Viewing 15 replies - 1 through 15 (of 22 total) 1 [2](https://wordpress.org/support/topic/make-this-plugin-responsive-1/page/2/?output_format=md) [→](https://wordpress.org/support/topic/make-this-plugin-responsive-1/page/2/?output_format=md) The topic ‘Make this plugin responsive’ is closed to new replies. * ![](https://s.w.org/plugins/geopattern-icon/easy-columns_abb3b5.svg) * [WP Easy Columns](https://wordpress.org/plugins/easy-columns/) * [Frequently Asked Questions](https://wordpress.org/plugins/easy-columns/#faq) * [Support Threads](https://wordpress.org/support/plugin/easy-columns/) * [Active Topics](https://wordpress.org/support/plugin/easy-columns/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/easy-columns/unresolved/) * [Reviews](https://wordpress.org/support/plugin/easy-columns/reviews/) * 22 replies * 10 participants * Last reply from: [mmustiga](https://wordpress.org/support/users/mmustiga/) * Last activity: [12 years, 6 months ago](https://wordpress.org/support/topic/make-this-plugin-responsive-1/page/2/#post-3236652) * Status: not resolved