Bootstrap column width + avatar

hello

I just installed your new version 2.1 of Bootstrap:

1) I use 2 columns profile and it seem the fact to set a custom width inside CB Configuration don't change nothing. Actually the default size for both columns seem to be around 46% each.

I suppose this settings is planned for old CB template but not for bootstrap. My goal was to set a field published inside a tab on position "left side of middle area" and Avatar field inside Portrait tab on position "right side of middle area". For left side I would like set 80% and for right side 20%. I tried to play with css but without success.

Could you please tell me what is the correct css to use for that ?


2) I use also CB Profile Gallery plugin and when I click on image, the size is not auto-adapted for fit mobile width screen. Image keep is default size (who is too bigger and result to be difficult to find the little cross for close popup) and I wondering if something is planned for avoid that.

I seen on another topic you suggested to use:

.cb_template_bootstrap img {
max-width: 100%;
}

but this do not have any effect on Profile Gallery..

Any clue ?


thank

1) I use 2 columns profile and it seem the fact to set a custom width inside CB Configuration don't change nothing. Actually the default size for both columns seem to be around 46% each.

Those parameters are not used for CB Bootstrap. The reason is they break responsive design and if the % isn't done correctly it won't cross-browser very well taking into consideration margins and paddings.

You can change this by editing the PHP file for the Bootstrap template and changing the columns it uses.

/components/com_comprofiler/plugin/templates/bootstrap/bootstrap.php

By default it uses cbColumn4 for 3 column display and cbColumn6 for 2 column display. You can see the grid map for bootstrap below (instead of span, use cbColumn).

twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem

2) I use also CB Profile Gallery plugin and when I click on image, the size is not auto-adapted for fit mobile width screen. Image keep is default size (who is too bigger and result to be difficult to find the little cross for close popup) and I wondering if something is planned for avoid that.

I do not touch images on profile. This is because there's too much variety in usages. With CB 2.0 we'll have a more consistent display where we can add a max-width comfortable. For now you need to use CSS to add a max-width to images.

but this do not have any effect on Profile Gallery..

Add !important to it and see if it'll then work.

The reason is they break responsive design and if the % isn't done correctly it won't cross-browser very well taking into consideration margins and paddings.

Ok so in that case I will not change the size...

Add !important to it and see if it'll then work.

I tried but did not see any change... I suppose is because I use "Thumbnail lightbox" mode ?

Ok so in that case I will not change the size...

It's fine to change the size as long as you use cbColumn1-12 usages, which is the same as using fluid-row with span1-12 in bootstrap. I've designed them all to be responsive in accordance with Bootstraps own CSS. If responsive design is not a concern then you can of course change to whatever you like.

I tried but did not see any change... I suppose is because I use "Thumbnail lightbox" mode ?

Very likely, I've no idea how the lightbox would respond with responsive usage.