UserList Mobile View after CSS

Hello CB, I have altered the UserList layout in template.css, the main templates css that is.

My UserList displays exactly how I want it to. See attached and thanks Krileon for your help with that. I use: .cbUserListFL_ and .cbUserListRowCol# .cbUserListFieldLine
with margin-top and text-align center for middle column and (font-size and font-weight) only.

All is good is that regards BUT mobile view is a bit disappointing. see attachment. I know it's responsive, so they stack and as middle column is set to test-align center it is where it is. Setting the other columns to text-align right and left doesn't work.

I suppose I want a miniature version of the desktop layout to appear. Am I asking or expecting too much?

Any ideas, methods or other useful posts I didn't find to give ideas/solutions?

Anything appreciated.

Ok so, I can add padding to the last field above the avatar to bring it down a bit. Doesn't affect desktop view and makes mobile tidier.

I'm thinking of putting the avatar column as first column, this will help. Work around.

In that case: How would I get the what is now 1st column and 3rd column not to stack but for both to go under each other on the right hand side. That would work well.

I now have mobile view as above but tidier. Progress. I need to know if the columns can be altered for mobile (smaller device) view basically?

Might even hide a few bits - to clean it up in mobile view if necessary.

Just thinking there - of maybe working off two columns, and css the positions like having 3columns, which may come out cleaner on mobile view. I'll keep you posted. Ideas welcome:)

Responsive CSS is done using @media to determine what to do at the various window widths. When it's going mobile it's specifically using the following.


You can use this usage to style just the mobile display however you're needing. The columns themselves are basically just floated with a % based width. See bootstrap.css for the col-sm-# class usages.

Thank you, you're a star. I was looking at @media funnily enough, cheers for direction. Any chance of taking it a step further. Where do I edit to make attachment 1 look like attachment 2 in mobile view. Along the lines of what would I put in?

I have this:

@media screen and (max-width: 767px) {
.cb_template .table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #dddddd;
}
.cb_template .table-responsive > .table {
margin-bottom: 0;

These:
}
.cb_template .col-xs-1,
.cb_template .col-sm-1,
.cb_template .col-md-1,
.cb_template .col-lg-1,
.cb_template .col-xs-2,
.cb_template .col-sm-2,
.cb_template .col-md-2,
.cb_template .col-lg-2,
.cb_template .col-xs-3,
.cb_template .col-sm-3,
.cb_template .col-md-3,
.cb_template .col-lg-3,...

These:
.cb_template .col-sm-2 {
width: 16.66666667%;
}
.cb_template .col-sm-1 {
width: 8.33333333%;....

And Pull, Push and Offsets.

You need to write some custom CSS for what you're wanting. I highly recommend you don't modify the default CSS as that's core Bootstrap 3 CSS you'd be changing and it will affect your entire CB install. With size being used for userlist is col-sm-# and you only need the sizes you're actually using in addition to the float.

Alright thanks. I see the % widths. I use 3, 6, 3 widths. Not sure where to put float: x; and two also have the same width i.e. 3, 3 as above.

Should I leave this a get a pro to do it later on in your opinion?The main thing I suppose is that it can be done!

I assume the core is below @media as per last post.

Tried sticking in a few bits here and there - no joy