Make this plugin responsive

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:
https://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

https://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.

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?

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.