WordPress.org

Support

Support » Plugins and Hacks » WP Easy Columns » Make this plugin responsive

Make this plugin responsive

  • 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/

Viewing 15 replies - 1 through 15 (of 22 total)
  • Eric753

    @eric753

    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

    Thanks for your support! Love the flexibility of the plugin!

    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 (max-width: 767px) {
    .wpcol-one-third {
    width: 100% !important;
    }
    }

    Displays beautifully as 1 column in Safari on iPhone 5

    Sorry to post here but I just a quick question will this work for most browsers? Chrome Firefox etc. Thanks.

    Havent tested on browsers Chrome and Firefox. Please test, let me know:
    http://www.hairhelp.com.au/price-list/

    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.

    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 css style.

    Give it a try

    Cheers

    for me the 1/3rd columns line up on top of each other.

    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 (max-width: 600px) {
    .wpcol-one-third {
    position: relative!important;
    }
    .wpcol-one-third {
    float: none!important;
    width: auto!important;
    }
    }

    should work with all broswers

    hi got it working with. thanks all.
    @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;
    }
    }

    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/

    When you make the screen smaller the columns overlap writing goes over the pictures.

    Any help would be much appreciated

    @neilsmart – Legend! You just made my life infinitely easier, thank-you!

    @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?

    @glenthom its working!! must have been my cache!
    Thanks thats amazing

    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

    @kcfried

    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

    @kcfried

    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)
  • The topic ‘Make this plugin responsive’ is closed to new replies.
Skip to toolbar