Hi,
I'm struggling to use jQuery to change the padding of a multiple choice question. I've managed to move the question block about in the page successfully but I can't figure out how to write the syntax to change the padding specifically.
This is my set of questions. There is a category question and a sub category question. I have setup the sub category to only display once the category question has been selected.
Q38 has the code (in addOnload part): It hides the actual question text, removes the separator (probably not needed now since I've changed the layout slightly and brings the questions closer together.
//category coding
jQuery("#"+this.questionId+" .QuestionText").css({display: 'none'});
jQuery("#"+this.questionId+"Separator").css({"margin": '0px'})
jQuery("#"+this.questionId+" .QuestionBody").css({"padding-bottom": '0px !important'});

jQuery("[class='QuestionOuter BorderColor MC " + this.questionId + "']").css({
"width": '80%',
"margin-top": '-3%',
"margin-bottom": '-3%'
});
Q39 (the sub category) has this code: again the separator code isn't needed now
//subcategory coding
jQuery("#"+this.questionId+" .QuestionText").css({display: 'none'});
jQuery("#"+this.questionId+"Separator").css({"margin": '0px'})

jQuery("#"+this.questionId+".QuestionOuter.BorderColor.MC."+this.questionId).css({
"margin-left": '20%', 
"width": '80%',
"margin-top": '-4%',
"margin-bottom": '2%'
});
What this code gives is this:
When you click on 'Arrivals & Reception' the In-page question is displayed (the sub category):


The closest I've got to make the change is using:
jQuery('.Skin label.MultipleAnswer, .Skin label.SingleAnswer').attr('style','padding:10px !important');
But this only seems to change the padding of the category questions and not the sub category question even though the code is in the sub category question. I don't know why that is. Can anyone help me change this one liner so that it only operates on this specific Question but using dynamic code (eg. this.questionId).

To help, below is a pic of the HTML element code for one of these multiple choice questions. Please could you help me understand how to read the class and ID needed to work on the padding of these questions. I'm normally ok with Whole questions but I've confused myself so much I'm now lost!!
FYI, this is all the different methods I've trialled. As you can see, I've tried different variations such as adding '!important' or adding in 'QR~' to the front of the QID code. I think I ca safely say I've had a go but I am no JS / web designer so would appreciate some help.
// Everything else below here is an attempt to change the padding of the sub category question but hasn't worked
//
// jQuery("#QR~"+this.questionId+" .QuestionBody").css({"padding-bottom": 'none !important'});
// jQuery("#QR~" + this.questionId + ".MC.label").css({"padding-top": '10px !important', "padding-bottom": '10px'});
// jQuery("#QR~"+this.questionId+".label.MultipleAnswer").css({"padding-top": '10px !important',
// "padding-bottom": '10px !important'});

// jQuery("#QR~"+this.questionId+".InnerInner.BorderColor.TX").css({"padding-top": '10px !important',
//  "padding-bottom": '10px !important'});

// jQuery("#QR~"+this.questionId).find('label').last().css({"padding-top": '10px !important'});
// jQuery(this.questionId).down('label').hide();
// jQuery("#QR~" + this.questionId + " .MultipleAnswer ul li:eq(0)").hide();

// jQuery("#"+this.questionId+" .Inner.BorderColor TB").css({"padding": "0px !important"});
// jQuery(".Inner").css("padding","0px");
// jQuery(".QuestionText").css("margin","0px");

//var QID = this.questionId;
//
//var QIDOtherLabel = jQuery("#QR~" + QID).find(".LabelContainer").siblings().attr("id");
//jQuery("rid='" +QIDOtherLabel+"']").css("padding-top","10px");
//jQuery("rid='" +QIDOtherLabel+"']").css("padding-bottom","10px");

//jQuery(this).parent().find(".MultipleAnswer").attr('style','padding:10px !important');

Thanks

Rod