Radio buttons don't all display in Safari

  • Profile Image
    Asked on July 18, 2016 at 01:09 PM

    The radio buttons at the end of my form only displays 1/4 buttons (only displays "Dreamer") in the Safari browser.  Is there CSS that will adjust that only on the safari browser??

    Thank You

  • Profile Image
    Answered on July 18, 2016 at 03:20 PM

    If I am not mistaken, the radio buttons you are referring to are under the payment integration's product list. It seems like you have setup a CSS code to make it four columns. Is that correct? 

    The only case where I see that the radio buttons are disappearing is when I view it on an iPhone iOS device.


    In Mac OS X Safari, it is displayed correctly although it shows them on a new line:


    Now this depends on how you would like to format the layout of this element on a mobile device. Would you like to have it the same formatting? Please note that the width is much smaller on a device which might congest your product list.

    Here's my proposed solution. Have the product list in 2 columns.


    You can clone my form here:

    Here's what I did:

    1. First, make your form mobile responsive: 

    2. After that, add this custom CSS code:

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

        #cid_165 {

            column-count: 2 !important;


        #id_165 {

            margin-left : 0 !important;

            margin-bottom: 100px !important;

            height: 100px !important;


        #cid_165 > span {

            display : inline-block !important;

            z-index : 99999999 !important;

            height: 80px !important;


        .form-product-item {

            overflow: visible !important;




    Let us know if that will work.