Area code stretching on mobile

  • Profile Image
    Asked on March 12, 2016 at 02:49 AM

    The area cdse keeps stretching on mobile view creating 2 lines for phone. Area code stretched too much.


    I have tried everything, turning on off resposive, redesigning on the basic perhaps you have a workaround.


    I attached a pic

  • Profile Image
    Answered on March 12, 2016 at 05:25 AM

    Inject this CSS codes to your form, this should position them side by side.

    /*responsive phone fields*/

    [data-type="control_phone"] input[name$="[area]"] {

      width: 80%;


    [data-type="control_phone"] input[name$="[phone]"] {

      width: 100%;


    [data-type="control_phone"] input[name$="[full]"] {

      width: 100%;


    [data-type="control_phone"] .form-sub-label-container{

        width: 40%;


    [data-type="control_phone"] .form-sub-label-container + .form-sub-label-container {

      width: 60%;

      float: right;

      margin-right: 0;


    [data-type="control_phone"] .form-input-wide .form-sub-label-container + .form-sub-label-container {

        width: 56%;


    Guide: (paste it at the bottom part if you have existing CSS codes in your form)

    Here's how it looks afterwards