[SOLVED] Can I do this with CB Conditionals (or, somehow?)

So I'm trying:

In hopes that will only apply the rows I wanted previously to the Edit page. This actually does nothing, it just breaks as if myFieldRows is no longer being used as at all.

I also tried it for the spacing with my text on only the profile page:
And also, nothing happened

I'm guessing I can also do this to fix my first problem? Some sort of ".cb_template .form-group .cbProfile {" So it only effects the spacing on the profile and not the field spacing in the edit? I'm not home to test right now which is why I ask. Is it .cbProfile for the profile info?

Yes.

In hopes that will only apply the rows I wanted previously to the Edit page.

That should only affect profile edit.

And also, nothing happened

Remove the .cb_template from the selector and see if that fixes it. Forgot those 2 selectors are on the same div. Example as follows.


.cbEditProfile .myFieldRows
.cbProfile .form-group

The below will probably also work.

.cb_template.cbEditProfile .myFieldRows
.cb_template.cbProfile .form-group

That worked, much thanks

Hello,

I've implemented the css to get fields side-by-side as Kyle suggested (see 1st attachment).
Actually these fields have type "Custom HTML" which call APIs of Facebook, Twitter and LinkedIn.
Which works fine.

However, it appears responsiveness gets lost when resizing the tab which holds the fields.
Fields become overlapped when shrinking user profile to small device level (see 2nd attachment).

What causes this: Joomla template? css of fields or custom HTML?

Thank you!

I put the following code into CB default template's override.css:

.myFieldRows {
width: 30%;
display: inline-block;
vertical-align: top;
}

.myFieldRows + .myFieldRows + .myFieldRows + .myFieldRows > .control-label {
display: none;
}

Your CSS has no responsiveness. You've set for them to have 30% width no matter what. Responsiveness is done using @media max-width and/or min-width for it to change the width based off the window size. The example I gave you below uses Bootstrap classes which already handle the responsiveness.

www.joomlapolis.com/forum/153-professional-member-support/235064-solved-can-i-do-this-with-cb-conditionals-or-somehow?start=24#287532

If you insist on using your own CSS for the width then you need to write CSS to handle responsiveness for that width. See the below Bootstrap grid for examples (it explains how to use @media as well).

getbootstrap.com/css/#grid