WordPress.org

Ready to get started?Download WordPress

Forums

byBrick Columns
[resolved] [closed] Non-responsive columns in Responsive Theme (25 posts)

  1. SomniumLucidus
    Member
    Posted 1 year ago #

    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/

  2. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    Hi,

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

    Emil

  3. SomniumLucidus
    Member
    Posted 1 year ago #

    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!

  4. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    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

  5. SomniumLucidus
    Member
    Posted 1 year ago #

    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.

  6. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    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

  7. SomniumLucidus
    Member
    Posted 1 year ago #

    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.

  8. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    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

  9. SomniumLucidus
    Member
    Posted 1 year ago #

    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!

  10. SomniumLucidus
    Member
    Posted 1 year ago #

    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.

  11. davidpaulsson
    Member
    Plugin Author

    Posted 1 year ago #

    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 :(

  12. SomniumLucidus
    Member
    Posted 1 year ago #

    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. :)

  13. Jef Jones
    Member
    Posted 1 year ago #

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

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

  14. SomniumLucidus
    Member
    Posted 1 year ago #

    Thanks! :)

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

  15. ghleor
    Member
    Posted 1 year ago #

    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!

  16. ghleor
    Member
    Posted 1 year ago #

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

  17. ghleor
    Member
    Posted 1 year ago #

    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?

  18. SomniumLucidus
    Member
    Posted 1 year ago #

    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!

  19. ghleor
    Member
    Posted 1 year ago #

    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

  20. SomniumLucidus
    Member
    Posted 1 year ago #

    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?

  21. ghleor
    Member
    Posted 1 year ago #

    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

  22. SomniumLucidus
    Member
    Posted 1 year ago #

    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.

  23. davidpaulsson
    Member
    Plugin Author

    Posted 1 year ago #

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

  24. ghleor
    Member
    Posted 1 year ago #

    Thank you very much to both!!!

  25. adriesilva
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic