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

  • Resolved SomniumLucidus

    (@somniumlucidus)


    Hi guys,
    I’m using this plugin together with the Responsive theme (by ThemeId.com). The columns build themselves OK, but aren’t responsive. I mean, I know at narrow screen widths they’re supposed to stack neatly on top of the other, but they aren’t doing this. They just get narrower, and that’s all.

    I’ve tried to fix the code myself, but for the life of me I can’t figure out what’s wrong. I’ve also tried the plugin on a fresh install of the theme (to make sure the failure wasn’t due to CSS modifications I could have made while skinning the theme), but no joy. Any ideas?

    I’d hate to have to uninstall this plugin, It’s the best column builder I’ve found. 🙁

    http://wordpress.org/extend/plugins/bybrick-columns/

Viewing 15 replies - 1 through 15 (of 24 total)
  • Emil Uzelac

    (@emiluzelac)

    Theme Review Admin

    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!

    Emil Uzelac

    (@emiluzelac)

    Theme Review Admin

    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.

    Emil Uzelac

    (@emiluzelac)

    Theme Review Admin

    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.

    Emil Uzelac

    (@emiluzelac)

    Theme Review Admin

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

    Plugin Author davidpaulsson

    (@davidpaulsson)

    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”.

    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!!

Viewing 15 replies - 1 through 15 (of 24 total)
  • The topic ‘[Plugin: byBrick Columns] Non-responsive columns in Responsive Theme’ is closed to new replies.