If I want to have different label widths for labels in my search form, how do I do that? I don't want to change the default label size of 145px. I want to change each individual label width size. In my custom css file, I was able to add css for changing the size for labels of different field types. I also added a div around the label text with a class name and but then the divs above this too precedence and it did not work.
Hi
Try something like this:
max-width: 100%; display: inline-block; // or maybe just 'inline' - margins will only apply for 'left' and 'right' padding: 3px 8px; // just an example border-radius: 2px; // just an example background-color: #333; // just an example <br>
Have a look through your template to see if there are any class names that you can apply
I use Bootstrap 3 so I would look here:
Or look at a site that has what you want and see how they did it via the browser's inspector
Bucklash
To change just one width you can target it by id - e.g.
#cck1r_label_art_title_backend {width: 200px;}
I did that initially:
#cck27r_label_subject {width: 200px;}
The labels are in a search form with multiple fields (multi-selects, generic search, single select). When you pick different items in the fields, and then press the search button, then the label names change with the different search results. So the form could look pretty with the correct CSS and then look ugly with the search results below it. The number in the field kept changing: #cck<number>r_label... cck6r, cck1r, cck4r, cck3r. I didn't know all the possible div label ids with different numbers that would result from the search criteria. So I stopped using this CSS styling method.