I have BB light version and have enjoyed using it very much! I am near the end of designing and started testing it on different screen resolutions. Everything looks perfect on my laptop (1280x720) and I’ve adjusted margins/padding to make columns line up evenly. But when i test on other laptop or desktop resolutions, all side-by-side columns’ spacing/padding becomes uneven at the bottoms. I’d include photo examples, but can’t find where to attach images here.
Here are a few page examples (though all pages that have side-by-side columns get uneven when i change to different resolutions):
Also, I read there is an update for the plugin as of March 24th, but it’s not listed for me in Wordpress, plugins. Is this only for premium subscriptions?
Thanks for getting in touch and glad to hear you are enjoying BB! I took a look at the examples you sent and it appears your columns have varying amounts of bottom padding for the column settings. One thing to keep in mind with the responsiveness of the modules, is that they will keep expanding in height to accommodate the text as the browser window shrinks so your best bet would be to make sure you have equal amounts of text and perhaps an even amount of padding in the columns settings for each. Go ahead and take a look at adjusting your column bottom padding a bit and I think that should get you going in the right direction. If you need further help, just let us know!
Thanks for your fast response Billy.
I’m quite confused…
How could one have equal amounts of text? Seems like that would really compromise one’s content.
Take this page for example, and just looking at the top 3 columns: http://manyriverscounselling.org/services/outreach-van/?
How would you adjust those so they are even on every screen resolution?
Each currently has a bottom margin: 16px and bottom padding: 0px. Text margins vary to account for different amounts of text and/or some only containing a logo, etc…
There has to be some way for each column area to keep the same design aspects, without having the same amount of content in each, no?
Thanks again for your assistance on this!
In order to keep the column design consistent, you’ll need to add more bottom padding to the actual column via the column settings. I see what you mean in that example and that is a tough one since the 2 outside columns have text that will dynamically resize based on the screen size.
The only option other than adjusting the column padding would be to adjust the content in the columns trying to keep text with other text columns. Essentially, the column divs are as tall as the content. Anything further there would need to be manually done with tables or some custom Javascript. Sorry about that!
This is quite a disaster for me.
I don’t believe adding more padding on the columns would fix the issue. I’ve just spent many hours trying to fix this, and no matter what, the columns become uneven at different screen sizes. I’ve even tried to have identical text in each column and it might help many resolutions, but some are still uneven.
I took an “easy” page (and removed the row background colour effect to make this problem less “ugly”) and attempted to make the content the same. If you look even at the bottom, where the “our sponsors” logos are, i’ve made each one the same height and all margins/padding identical, yet it still looks uneven in many instances:
This seems like a very big problem with no great solution? If I’m following your suggestions wrong, please let me know - ie) how can changing the padding really help across all resolutions? I’m about to face having to re-design nearly every page of this website now, so any real fix you can come up with would be GREAT!
I apologize for any inconvenience and I wish there was an easy fix, but the columns are dynamic as I mentioned. Logically, there really isn’t any other way for them to work as what would happen to the content as you get down to responsive sizes if that makes sense.
On the example page you just sent, rather than using individual column backgrounds, I would suggest just using a row background and border and leaving the individual column background/border settings blank. That would give you a consistent look across that I believe you are looking for. Let me know if that helps.