Bring closer for Label and Options on Checkbox

[knightskid]

I have tried with padding, margin, but no luck to bring Label and Options closer to each other as the default spacing is quite far apart for my case.

[support]

Hi,

You should be able to remove the small margin on the side of the radio button. It is applied to the div wrapping the radio button. Can you give me the url so I can take a look in the browser and find a solution for you ?

Regards,

Félix

[knightskid]

moneyloan.sg/personalloan/

Another problem i have right now as shown in the attachment. There is some part been cut-off at the bottom when i view with my iPhone 6s+, but on my desktop browser, no problem.

• This reply was modified 7 years, 6 months ago by knightskid.

Attachments:

You must be logged in to view attached files.

[support]

Hi,

*EDITED FROM FIRST ANSWER*

You have a lot of error and warnings in the console, I suggest you look into those because they could be the source of the cut-off on Iphone 6s+. On my phone (Iphone 4s), it’s cut-off on the right too. Have you applied some custom css yet ?

Yo reduce the space between the radio button and the label, you have to set the margin of the div wrapping the radio button to 0px or a bit more (now it’s 5px). I suggest 2px. Here’s the custom css you have to add (I’m using the class to the select it):

.iphorm_1_6-input-li .checker {margin-right: 2px;}

You can see this section here for ways to add custom css.

Hope this helps !
Regards,

Félix

• This reply was modified 7 years, 6 months ago by support.
• This reply was modified 7 years, 6 months ago by support.

[knightskid]

Hi Felix,

If you mean the Custom CSS on my theme, it does have it with the theme and is totally blank. I have put the .iphorm_1_6-input-li .checker {margin-right: 2px;} onto the custom css that comes with my theme, but still does not have any movement at all. I did your another method which is by adding Html, still no movement at all too.

By the way, you have highlighted on “a lot of error and warnings in the console”, do you referring to the form i have setup or the website? If referring to the form, i do use Global CSS Styling on Form title, Element label, Text input elements, Form outer wrapper, Option labels, Submit button etc…., of course on the Form itself , i did added CSS Styles under “Advance” on certain “Field” too.

And by the way, kindly advise how you check the “error and warning”? Because what i did usually is on my Chrome browser, i just right click and select “Inspect”, follow by select “Console” to see the “error or warning”, is it correct?

I do know my matter of checking as state above, there is an error on “Uncaught ReferenceError: burgerMenus is not defined(…)”, but am not sure what is it, if you know, do advise, but of course am also will be asking the theme developer for advise as well.

[support]

Hi,

You have the correct way to check the error. On my side, my console log is :

(index):10 The key “target-densitydpi” is not supported.

2(index):13 A Parser-blocking, cross-origin script, http://ajax.cloudflare.com/cdn-cgi/nexp/dok3v=088620b277/cloudflare.min.js, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity.(anonymous function) @ (index):13

(index):1 Access to Font at ‘https://moneyloan.sg/wp-content/themes/directory2/design/fonts/opensans/opensans-condbold.woff’ from origin ‘https://moneyloan.sg’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://moneyloan.sg’ is therefore not allowed access.

(index):1 Access to Font at ‘https://moneyloan.sg/wp-content/themes/directory2/design/fonts/opensans/opensans-condbold.ttf’ from origin ‘https://moneyloan.sg’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://moneyloan.sg’ is therefore not allowed access.

These are not error about your form, but you should still take a look. As for the cut-off, have you applied any styling for fixing height or width of the form ? Have you applied some styling to the column or line while integrating it in the page ? I made a little correction to the CSS you can add to your custom css theme file for spacing out. I tried it in the console and it works. Try this :

.iphorm_1_6_1_label div.checker {margin-right: 0px;}

Hope this helps,
Regards,

Félix

[knightskid]

Hi Felix,

.iphorm_1_6_1_label div.checker {margin-right: 0px;} manage to make it works.

As for the form styling on height and width, i believe it is due to the theme. So, i have already get the theme developer to look into it to solve those error and warnings.

Thanks for your great helps.

[support]

Hi,

Great to know the CSS fixed it for the spacing. Don’t hesitate to let me know if you need anything else.

Regards,

Félix

[Author]

Posts