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

Hi,

Even though this is a plugin question, let me try to help. Can you provide the URL where this is located please?

Emil

Hi, Emil. First of all, congrats for Responsive, it’s an amazing theme!

Regarding the URL question, there’s none yet — I’m working on an offline server with WordPress installed locally on my computer. The site will be up when finished or near-finished. However, the theme alone is fully responsive, of course. It just doesn’t seem to get along with the plugin, or vice versa.

Thanks anyway for the prompt response!

If time permits later on today I will install this great plugin and see if I am able to locate the columns in question.

Thanks,
Emil

Many thanks in advance, Emil!

Meanwhile, I switched for a moment to the good ol’ Twenty Eleven theme to see if the plugin would work, and nada, nothing yet. The columns still get compressed instead of stacking.

Ah that could be because both Themes are using fluid widths, can you try one that doesn’t? Try my Shell, I know for sure that Shell’s not fluid ??

Emil

Trying Shell Lite version 1.5.4 (the zipped package was still in my hard disk, since I considered using this theme at an earlier point!)…

…And nothing yet. ?? The columns created by the plugin build themselves, do not get narrower at smaller screen widths (as one would expect on a non-fluid theme), and do not stack either.

Maybe I should be asking if someone who’s installed this plugin ever got the columns to stack at narrow screen widths.

My bad, this plugin is Responsive after-all ??

So maybe we can wait for the plugin author to respond, they’re definitely up to date with their codes and extremely clean as well, just took a very quick peak ??

What I did with Responsive is that on smaller screens columns are stacked https://themeid.com/responsive/ that way anything* we have in will “play” nicely.

Emil

Just fixed the problem. I replaced the following css lines of the plugin (starting at line 40):

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {

…with these ones:

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

…which match the screen widths of the Responsive theme. ??

However, the plugin still has another problem that I’d been noticing from before the fix: sometimes it adds a space at the top margin of the columns. This space seems to be incremental, e.g.: the first column has none, the second has a little, the third has some more, etc.
This only happens on some pages. Maybe the ones that have been edited once or more than once accumulate space at the top? I still have to check that. Ah, the mysteries of code!

The space at the top of a column only appears when said column starts with a title tag (say, h2), so maybe it’s got something to do with the css as well.

Anyway, this topic was about the columns not stacking, so I’m marking it as resolved.

Hi guys, glad you sorted it out ?? And I’m glad you like the little columns plugin I’ve done. As mentioned the space is something the TinyMCE editor adds depending on how you write your text, so it’s hard to control with css ??

Hi David, thanks for chiming in. It’s indeed a clever plugin… As a graphic designer I’m kind of allergic to single-column webpage text, and this plugin turns my full-width pages of text into a much better looking layout, not to mention much easier to read. And the ability to have unequal width columns within the same page is a much welcome bonus! ??

Regarding the TinyMCE editor problem, I’ve noticed that sometimes, regardless of how I write or organize the text, after publishing the page I get a blank space on top of a column. An analysis using Firebug shows that the cause of the space is not CSS, but a <br>. How or why it gets there I don’t know, but for the time being I’ve implemented a ‘quick and dirty’ fix by adding a:

br {
	display:none;
}

…to the plugin’s CSS code.
Since breaks (<br>) don’t occur anywhere else in text paragraphs or titles, I guess it’s safe.

Finally, a little extra space may also appear on top of columns that begin with titles because of CSS top margins of the titles themselves, but of course this is fixable via CSS. ??

Hi. Check this plugin out. Might do the trick: “Easily create fluid, responsive column layouts”.

https://graphpaperpress.com/plugins/gpp-shortcodes/

Thanks! ??

Also Easy Columns, by Pat Friedl, though non-responsive, will work fine providing the @media screen parameters are added to its CSS file.

Hi, I’m using Responsive Theme too with this plugin.
Thanks to Emil Uzelac and David Paulsson for them!!
I’ve replaced the following css lines as you say for the screen widths of the Responsive theme, but columns don’t stack, just get narrow, yet.

Have you got to resolve in your site?
Could you say me if you do something more?
Thanks!

Sorry it’s ok!
I’d just changed code in bb-columns-style.css, and I forgot change code in bb-columns-style.min.css
Now I’d changed code in both of them and it works!
Thank you Somnium LUcidus!!