Problem with listing form on small mobile devices

This topic contains 12 replies, has 4 voices, and was last updated by  Naveen Giri 4 years, 11 months ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
  • Author
    Posts
  • April 3, 2020 at 10:28 am #538217

    Martin Steimann
    Lifetime Member
    Post count: 262

    Hello,

    my add listing form looks okay on large screens, but it gets quite messy on an iPhone 8 or smaller. I have attached some screenshots with red arrows that point to the issues.

    There are some inconsistencies in how the field (rows) are displayed. Some are displayed with title and input field next to each other, some beyond each other.

    This will cause long titles to overlap with the input fields, which not only looks weird, but also (in my case) prevents the user from checking a mandatory box (terms & conditions).

    Regards,
    Martin

    April 3, 2020 at 10:30 am #538221

    Martin Steimann
    Lifetime Member
    Post count: 262
    This reply has been marked as private.
    April 3, 2020 at 12:11 pm #538232

    Kor
    Moderator
    Post count: 16516

    Hi Martin,

    Thanks for your reply. Ok, try using the custom CSS code below and see if it fixes it. 

    @media only screen and (max-width: 600px) {
  .geodir_form_row ul {
    width:100%!important;
}

.geodir_message_note {
    padding-left: 0px!important;;
}

.geodir_form_row label {
   width:100%!important;
}

.geodir_form_row .geodir_textfield, .geodir_textarea, .geodir_form_row select {
    width:100%!important;
}
}
    April 3, 2020 at 12:57 pm #538246

    Martin Steimann
    Lifetime Member
    Post count: 262

    Wow, you fixed it – thank you so much!

    Just some minor issues left:

    1. The text which is automatically wrapped in brackets shows extra blank space after an opening and before a closing bracket, which I would like to get rid of, because sometimes the lines brake in such a way that a closing brackets sits on a line on its own. (Please note listing form 4)

    2. Alex kindly provided some CSS code which lets us change the text size of the individual text occurrences of the listing form. I managed to achieve good results, but the line spacing changes from „this is what I wanted it to be“ in landscape mode to „too narrow“ in portrait mode. Can this be fixed with CSS as well? (Please note listing form 5 & 6)

    3. The (rather lengthy) text of my submit button gets truncated in portrait mode. (Please note listing form 7)

    April 5, 2020 at 4:15 am #538528

    Alex Rollin
    Moderator
    Post count: 27815

    1. There isn’t an easy fix for that. I recommend you alter the translation.
    2. You can do that with custom CSS. If you want to change it for mobile only you will need a media query as explained here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
    You can also check through the forum for examples.
    3. Again, the fix is translation, there, or complex CSS.

    April 5, 2020 at 5:48 am #538543

    Martin Steimann
    Lifetime Member
    Post count: 262

    Thank you for your reply, Alex.

    I understand that if I want to solve the issues 2 & 3, I will need to train my CSS skills (which are none right now).

    But maybe you misunderstood the issue 1. These mentioned brackets have nothing to do with translation. They are generated automatically by the ‘Fieldset (section separator)’, which I have used several times and sent you one example in the screenshot ‘listing-form-4.png’

    I have typed the description text with no bracket at all, but they get wrapped in the frontend, which is nice. But not so nice is the extra blank space after an opening and before a closing bracket. Is there nothing you can do about it?

    April 5, 2020 at 5:58 am #538548

    Martin Steimann
    Lifetime Member
    Post count: 262

    Just in case someone has struggled with this as well – I just solved my issue 2 (the one with the line spacing of the field labels on portrait mode) by adding an ‘important!’ to the code. This code did the trick:

    /* GeoDirectory V2 – Add Listing Page field labels – */
    .page-id-10648 .geodir_message_note {
    font-size: 14px;
    line-height: 18px!important;
    }

    April 7, 2020 at 8:44 am #538862

    Kor
    Moderator
    Post count: 16516

    Hi Martin,

    Thanks for your reply and I’m glad that you sorted it out yourself. Let us know if you need anything further.

    April 8, 2020 at 6:09 am #539073

    Martin Steimann
    Lifetime Member
    Post count: 262

    Hello Kor,

    glad you chimed in! There are just 2 issues left:

    1. Geodirectory’s ‘Fieldset (section separator)’ ads extra blank space after an opening and before a closing bracket. (listing-form-4.png)

    2. The ‘submit’ button gets truncated on mobile devices. (listing-form-7.png)

    Thank you for helping me out!

    April 8, 2020 at 8:30 am #539077

    Kor
    Moderator
    Post count: 16516
    This reply has been marked as private.
    April 10, 2020 at 7:36 am #539432

    Naveen Giri
    Moderator
    Post count: 1559
    This reply has been marked as private.
    April 10, 2020 at 7:46 am #539434

    Martin Steimann
    Lifetime Member
    Post count: 262

    Hello Naveen Giri,

    thank you very much for fixing both issues – excellent support!

    Kind regards,
    Martin

    April 10, 2020 at 8:59 am #539445

    Naveen Giri
    Moderator
    Post count: 1559

    Thanks for confirming Martin,
    have a great day…Stay safe

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
20% Discount Offer
Hurry! Get your 20% discount before it expires. Get 20% Discount