Tagged: ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 22, 2019 at 5:08 am #1070209
    B

    Hello, on mobile view all my form fields are on the wrong side of the field box, they look normal on desktop though

    February 25, 2019 at 11:49 pm #1071544
    Basilis

    Hey B,

    Can you please attach a screenshot of the issye?

    Best regards,
    Basilis

    February 26, 2019 at 12:01 am #1071549
    B

    Hello, link to screenshot below. Thanks!

    March 1, 2019 at 7:24 am #1072932
    Rikard

    Hi,

    Thanks for the screenshot. Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
.gfield_label {
  float:left !important;
}
}

    Best regards,
    Rikard

    March 3, 2019 at 9:19 pm #1074037
    B

    Thanks Rikard, that seems to have worked for some of the forms but on some of the pages it is still displaying on the wrong side – links to those pages below

    March 4, 2019 at 2:46 pm #1074386
    Rikard

    Hi,

    Thanks for the links, though I can see all the labels above the boxes on my end. Are you sure that you are not getting cached results?

    Best regards,
    Rikard

    March 4, 2019 at 9:16 pm #1074519
    B

    Thanks Rikard, that must have been it! I did clear my cache when I initially checked but they’re all displaying above now.
    Is there anything I can add to make the field boxes longer on mobile? they are only taking up half the width on mobile

    March 5, 2019 at 2:25 am #1074578
    Jordan Shannon

    Hi,

    Add this to quick css:

    @media only screen and (max-width: 767px)  {
.ginput_container.input_container_text{
width:100%!important;
}}

    Best regards,
    Jordan Shannon

    March 5, 2019 at 10:17 pm #1075111
    B

    Hi Jordan,
    this hasn’t changed the width, I’ve tried clearing my cache but it still looks the same

    March 8, 2019 at 11:02 am #1076288
    Ismael

    Hi,

    Thanks for the update. Please adjust the css code a bit.

    @media only screen and (max-width: 767px)  {
.gform_wrapper .gform_body #gform_fields_4 li>.ginput_container, .gform_wrapper .gform_body #gform_fields_9 li>.ginput_container, .gform_wrapper .gform_body #gform_fields_5 li>.ginput_container, .gform_wrapper .gform_body #gform_fields_3 li>.ginput_container, .gform_wrapper .gform_body #gform_fields_12 li>.ginput_container, .gform_wrapper .gform_body #gform_fields_14 li>.ginput_container, .gform_wrapper .gform_body #gform_fields_8 li>.ginput_container {
    width: 100% !important;
    float: left !important;
    margin-left: 0px !important;
    margin-bottom: 3% !important;
}
}

    Best regards,
    Ismael

    March 11, 2019 at 10:26 pm #1077517
    B

    Thanks Ismael, that has worked perfectly!

    March 11, 2019 at 10:31 pm #1077519
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Gravity Form on mobile view’ is closed to new replies.