WordPress.org

Ready to get started?Download WordPress

Forums

WP Easy Columns
Make this plugin responsive (23 posts)

  1. ghleor
    Member
    Posted 1 year ago #

    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/

  2. Eric753
    Member
    Posted 1 year ago #

    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!

  3. Jason75
    Member
    Posted 1 year ago #

    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

  4. NeilSmart
    Member
    Posted 1 year ago #

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

  5. Jason75
    Member
    Posted 1 year ago #

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

  6. NeilSmart
    Member
    Posted 1 year ago #

    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.

  7. Jason75
    Member
    Posted 1 year ago #

    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

  8. adriesilva
    Member
    Posted 1 year ago #

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

  9. adriesilva
    Member
    Posted 1 year ago #

    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

  10. NeilSmart
    Member
    Posted 1 year ago #

    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;
    }
    }

  11. signalfilms
    Member
    Posted 1 year ago #

    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

  12. Glen Thomson
    Member
    Posted 1 year ago #

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

  13. signalfilms
    Member
    Posted 1 year ago #

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

  14. deargeek
    Member
    Posted 12 months ago #

    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.

  15. Pat Friedl
    Member
    Plugin Author

    Posted 12 months ago #

    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?

  16. Pat Friedl
    Member
    Plugin Author

    Posted 12 months ago #

    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.

  17. deargeek
    Member
    Posted 11 months ago #

    Hi,

    Your proposed fix seems to have an issue when reducing 3 columns to 2. Have a look at the pictures at the bottom of http://www.alliedhealthpractice.co.uk/

    Thanks,

    Jonathan.

  18. Pat Friedl
    Member
    Plugin Author

    Posted 11 months ago #

    Yup, looks like I'll need to add a little more CSS to float everything left. I'll work on a fix and load to the repo. So the prpopsed widths and breakpoints are good then?

  19. deargeek
    Member
    Posted 11 months ago #

    Yes, I'd support those widths & breakpoints.

    Of course, you could cheat and use the byBrick Columns method - just collapse straight down to a single column.

    Thank you very much!

    Jonathan.

  20. Pat Friedl
    Member
    Plugin Author

    Posted 11 months ago #

    I should have this updated this week. Sorry, got a few projects screaming for attention!

  21. deargeek
    Member
    Posted 11 months ago #

    Brilliant - loving 2.11 !

  22. Pat Friedl
    Member
    Plugin Author

    Posted 11 months ago #

    Thanks! Next up, pick n' click column styles and more div/container options. Any thoughts?

  23. mmustiga
    Member
    Posted 9 months ago #

    Hi! Thank you for this awesome plugin!! Question though, how can I make it unresponsive? I want the mobile view to look the same (same number of columns) as the desktop view.
    http://www.faunalikesflora.com/

    Thank you!!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.