Space Between Select Box Lable And Select Box Is To Big

Store Builder Questions
1

Hi

When I add a select box to any product on my store, there is a large amount of white space between the label and the actual select box.

http://shopability.ie/multi-sensory/multi-sensory-en/relaxation-calming-and-withdrawal-en-2/comfort-en/bean-bag-en-2.html



On this product I have two select boxes, Model and colour

The issue is that when one of the variants within the select box has long text, the select box jumps to below the label and messes up the layout as per this product.



I need to reduce the amount of white space. I am on 4.1.1 but this issue was also on 4.0.3



Alan

2

[font=Consolas,].product-list-field > label {

margin: 0 10px 0 0; <---------------- Change margin

font-weight: bold;

overflow: hidden;[/font]

3

[quote name='Triplets' timestamp='1390340862' post='175695']

[font=Consolas,].product-list-field > label {

margin: 0 10px 0 0; <---------------- Change margin

font-weight: bold;

overflow: hidden;[/font]

[/quote]

Triplets thank you for the information, but can you tell me which css sheet it is in. I upgraded to 4.1.1 and suddenly it is not possible to switch into css debug mode. so I can not find the code.



Alan

4

HI Thanks

I found the css in base css its a bit different in 4.1.1



.product-list-field label {

float: left;

margin-left: -120px;

padding-top: 1px;

width: 80px; -------->;this was 120, I changed it to 80

font-weight: normal;



I think this has only become an issue because my product content contained in a grid set at 8 as I have one on each side set at 4



Alan

5

Put the CSS code you want into the CSS area of the theme editor. There's no need to worry about finding the original sheets.



If you want to use your own editor then place the CSS into the relevant style CSS for your theme. That's where it's placed if you do the change via the theme editor.



So if your Theme was called MyTheme and you were using the MyStyle theme the CSS file would be:



design/themes/MyTheme/styles/data/MyStyle.css



I've got over 300 lines of customised CSS in my development store and I've yet to find something I can't override that way unlike the initial releases of 4.

6

[quote name='NairdaCart' timestamp='1390382886' post='175762']

Put the CSS code you want into the CSS area of the theme editor. There's no need to worry about finding the original sheets.



If you want to use your own editor then place the CSS into the relevant style CSS for your theme. That's where it's placed if you do the change via the theme editor.



So if your Theme was called MyTheme and you were using the MyStyle theme the CSS file would be:



design/themes/MyTheme/styles/data/MyStyle.css



I've got over 300 lines of customised CSS in my development store and I've yet to find something I can't override that way unlike the initial releases of 4.

[/quote]Thanks I will try this later today.



Alan