Radio labels don't seem to be changing.

  • betwrestling
    Asked on March 28, 2017 at 5:12 AM
    However the radio labels don't seem to be changing. For example i use this code..

    .form-label {

        font-size : 14px !important;

        margin : 0px 0px 10px 0px;

        width : 500px;

    }

    No matter what i change the font size to, when i view it on mobile it doesn't change at all. 

  • Charlie
    Replied on March 28, 2017 at 5:59 AM

    I checked your website and the labels on the radio button fields are already 14px. Here's a screenshot of it:

    Radio labels dont seem to be changing Screenshot 50

     

    If I manually changed the font-size to 32px, this is how it looks like:

    Radio labels dont seem to be changing Screenshot 61

     

    You can see the difference between the 14px and the 32px, however, the form is embedded on a website that is not mobile responsive and stays in a desktop view. 

    Also, I noticed that your CSS code has a couple of repeating styles that sets the .form-label to different font-size. Here are a few:

    Radio labels dont seem to be changing Screenshot 72

    Radio labels dont seem to be changing Screenshot 83

     

    You can see you have one CSS code that sets it to 12px, then another that sets it to 14px, then another that sets to 14px in a general style. I suggest deleting the redundant ones. 

    I hope that helps. 

  • betwrestling
    Replied on March 28, 2017 at 6:29 PM

    Thank you for the explanation.

     

    With these media only screen codes..

    @media only screen and (max-device-width: 320px){

    @media only screen and (max-device-width: 640px){

    Do i need to put the codes in between both the 320px code as well as the 640px code? Or can i just put all the codes underneath both of them?

    What i mean is i currently have it set like this..

    @media only screen and (max-device-width: 320px){

    CODE HERE

    @media only screen and (max-device-width: 640px){

    SAME CODE HERE

     

    But i'm wondering whether i could put the code underneath both @media screen codes, like the following..

    @media only screen and (max-device-width: 320px){

    @media only screen and (max-device-width: 640px){

    CODE HERE

     

    Hope that makes sense!

  • Ian
    Replied on March 29, 2017 at 1:14 AM

    I had created a separate thread for the question at https://www.jotform.com/answers/1105121

    You will be replied shortly on the new thread