Question

So first things first the only reason I include IE in this is its the only browser that i can get to render the issue. My thought process was that if I can fix the display issue in IE it would resolve itself on the mobile devices.

The issue is that the radio buttons need to be aligned to the left. The headache i’m facing is that i have to make this work with CSS because I do not have the ability to change the HTML structure of the code, since i am optimizing this for mobile, any changes to the HTML would affect hundreds of other pages, thus I’ve been told not to change the HTML structure of the page. Which sort of throws semantics out the window. If someone could help me to understand what exactly is happening with this code, it displays correctly on most desktop browsers, but not IE, Android or iOS.

The only CSS affecting the inputs and spans is here:

.mobile .formBound span {
  display: block;
 }

.mobile form span, .mobile form input {
  margin: 0 auto;
}

.mobile .formBound input {
  float: left;
}

This is the HTML structure of the elements:

<div class="g3 group_3" id="tabindex_11">
    <div style="width:inherit;">
        <span class="field_label" id="field_label_donateCharity">How much would you normally be willing to donate to charity every year?:</span>
        <span class="requiredField">*</span>
    </div>
    <input type="radio"  name="donateCharity" id="donateCharity" class="offerRadioButton {required:true}" value="Less than $10">
    <span class="radioCaption">Less than $10</span>
    <input type="radio"  name="donateCharity" id="donateCharity" class="offerRadioButton {required:true}" value="$10-$100">
    <span class="radioCaption">$10-$100</span>
    <input type="radio"  name="donateCharity" id="donateCharity" class="offerRadioButton {required:true}" value="$101-$200">
    <span class="radioCaption">$101-$200</span>
    <input type="radio"  name="donateCharity" id="donateCharity" class="offerRadioButton {required:true}" value="$201-$500">
    <span class="radioCaption">$201-$500</span>
    <input type="radio"  name="donateCharity" id="donateCharity" class="offerRadioButton {required:true}" value="$501 or more">
    <span class="radioCaption">$501 or more</span>
</div>

I’m fairly certain at this point that the issue is something to do with the HTML structure of the code.

Any suggestions as to what could be done to get this to display properly on a mobile device?

Answer 1

The solution here ended up being a small script that would find the elements and set a
tag after each element