Checkbox on same line as question in mobile view

Is it possible to move the checkbox up to be on the same line as the question specifically in mobile view? I have left selected as the label alignment but the label automatically appears on top in mobile view.

In order for the checkbox to be on the same line as the question in mobile view, please try injecting the CSS code below:

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape)

{

span.form-checkbox-item {

    position: relative;

    top: -30px;

    left: 150px;

}

}

Result:

Here's the guide on How to Inject Custom CSS Codes.

Let us know if you need further assistance.

Hi. Thank you for your reply. I injected the code (line 294) as outlined however it still is not showing the checkbox on the same line. 

Here is how it appears on my end.

Can you please post a screenshot of how it appears from your end? Also, may we know the device and browser you are using to access the form?

My screen now appears that way. I'm thinking there may have just been a delay when it took effect. Now that it's in place though I see that the checkbox overlaps some of the words, like "marketing post card holder" for instance. How can I get the checkbox to be on the same line but spaced further away?

Also, I adjusted the margins on some questions in order to make text appear underneath to make my own sublabel. For instance, "1 per person" goes closely underneath "Amethyst Clusters" to act as the sublabel. In web view it looks fine but it doesn't show properly in mobile view. How can I fix this?

I was able to see the issues you described on an Android phone. Please give me some time to further test it and I will get back to you with a solution as soon as possible.

Apologies for any delays. To fix the issues you described in your last reply, please inject the following CSS codes below to your form.

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

li[data-type="control_checkbox"] div[id^="cid_"] {

    text-align: right !important;

    position: absolute !important;

    top: 5px !important;

    width: 250px !important;

}

li[data-type="control_checkbox"] label {

    width: 150px !important;

}

}

Note: This may require you to update/remove the CSS codes that were previously provided above by my colleague.

If you have other questions or concerns regarding this, please feel free to let us know.

Thank you for your reply. I entered the code as you suggested. It shows when I do the mobile preview online however it doesn't actually show correctly on my mobile device.

Thank you so much for the update.

I checked your form and I didn't see the CSS codes I provided injected in it now. I can only assume that you might have removed it right after you tested it and it didn't work. Just to be sure, did you remove the CSS codes (line 294) provided by my colleague above when you tested your form with the new CSS codes?

Here's the form I have used for testing that has the new CSS codes — https://form.jotformpro.com/72508407682965

Please check it also on your end and see if it still has the same result.

Also, may we know the device you are using to test the form(s)? And if you can send us a screenshot of how it looked like on your end, please? — How-to-Post-Screenshots-to-Our-Support-Forum

We will wait for your response.