[Plugin: byBrick Columns] Non-responsive columns in Responsive Theme

I say it’s ok, well it is in Firefox but in Safari columns don’t stack, just get narrow.
Do you know the reason?

Hi, ghleor. I’m sorry but I can’t answer your question since I resolved to go with the Easy Columns plugin in the end. At some point I needed to add working breaks (<br>) in my paragraphs, so I gave up byBrick Columns.
Easy columns needs ‘surgery’ in order to make it responsive, but once tweaked it will work OK (even in Safari — I’ve just tested it on an iPad that has Safari installed).
Hope this helps!

Very kind for your answer! I’ve changed to Easy Columns plugin and I’ve added this code in wp-ezcolumns.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;
	}
}

And it works fine in Firefox but not in Safari, I’d really appreciate if you could give me some clue about making plugin responsive, I have not much knowledge in responsive stuff and I’m stuck…
Thanks

In my code I have width: auto; instead of width: 100%;, but I don’t think that would affect Safari’s behavior in any way.

Since you had this problem with byBrick Columns too, I think it might be something on the browser’s side. Have you tried cleaning the cache?

Thanks!But it isn’t work yet
I guess I must add some code to work in Safari or Chrome
Have you try Easy Columns in Google Chrome? it isn’t work, columns don’t display

Hmmm. Works fine in Chrome for me.

What if you replace those lines…

@media screen and (max-width: 650px),
@media screen and (max-width: 480px),
@media screen and (max-width: 320px),
@media screen and (max-width: 240px)

With just:

@media screen and (max-width: 768px)

I just did the opposite (added several screen widths instead of just @media screen and (max-width: 768px), which is the code I have been using) and replicated your problem.

Hi guys. Just to let you know I’ve read all your comments here and there will be an update tomorrow that resolves the stacking of columns on small displays and also removes any empty <p></p> tags that the tinymce editor adds. Thank you for you input (and patience).

Thank you very much to both!!!

i found an answer to make my 1/3rd columns responsive.. place this code in “easy column’s” css stylesheet:

@media (max-width: 600px) {
.wpcol-one-third {
position: relative!important;
}
.wpcol-one-third {
float: none!important;
width: auto!important;
}
}