VGM textboxes too large for mobile view

New home Forums Visitor Generated Markers Troubleshooting VGM textboxes too large for mobile view

This topic contains 15 replies, has 3 voices, and was last updated by  johnnyeng 10 months, 3 weeks ago.

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #37355

    aidanjpadden
    Member

    Hi,

    I just bought the Pro and VGM options last night for a site I’m working on – they’re working great thank-you but there’s a problem when using mobiles (I use a Galaxy S8+ and the same problem is present on an S8).

    Basically the VGM text boxes are too wide for the mobile view and the formatting doesn’t look right.

    I can’t see anything obvious that matches this problem in the previous forum posts and it shows up with quite a few themes I’ve tried so far (the screen shot is of Illustratr)

    Is this something that can be fixed via CSS please or is it a case of VGM not playing nicely with some themes?

    With thanks in advance

    Attachments:
    You must be logged in to view attached files.
    #37363

    Perry
    Moderator

    Hi there

    Thank you for getting in touch and thanks for bringing this to our attention.

    Can you please link us to the page in question and we will provide CSS to make this form more mobile friendly, please let us know?

    Kind regards
    – Perry

    #37364

    aidanjpadden
    Member

    Hi Perry, how are you?

    Please excuse the bad language in the URL but it’s http://www.shittingcats.co.uk – quite literally a website to track where people are having issues with cat mess causing issues 😀

    Have a great weekend!

    With thanks in advance,

    Aidan

    #37479

    Perry
    Moderator

    Hi Aidan

    Please go Maps -> Settings -> Advanced and under Custom CSS paste the following:

    .wpgmaps_user_form input,
    .wpgmaps_user_form select,
    .wpgmaps_user_form textarea
    {
    max-width: 50vw;
    }

    Does that work for you?

    Kind regards
    – Perry

    #37484

    aidanjpadden
    Member

    Hi Perry, how are you?

    That’s superb thank-you and that has sorted it out 🙂

    Thanks again for the help with that one – have a great day,

    Best regards,

    Aidan

    #44264

    johnnyeng
    Member

    Hello there, we totally love your plugin. It’s served us well.

    I too have the issue whereas the form fields are being cut off in mobile.
    I would be awesome if they would flex and stack.
    Is there any way to do this?

    Please see my screen shot to see the issue we’re having.

    I tried adding the CSS that Perry mentions above, but it didn’t work.
    I think it’s because I have the labels and the form fields embedded in a table.
    Any advice is welcomed.

    Thankfully, JE

    Attachments:
    You must be logged in to view attached files.
    #44309

    Perry
    Moderator

    Hi there

    Thank you for getting in touch 🙂

    The necessary CSS can vary from site to site, could you please link us to your page?

    Kind regards
    – Perry

    #44373

    johnnyeng
    Member
    This reply has been marked as private.
    #44378

    Perry
    Moderator

    Hi Johnny

    I’ve taken a look at this on my mobile simulator and I don’t see anything immediately wrong, can you please send a screenshot of what you are seeing, and an example of the layout you would like on mobile?

    Kind regards
    – Perry

    #44380

    johnnyeng
    Member

    sure ,please check put the attached screeny:
    Screenshot_20181024-142258_Samsung Internet.jpg

    Was hoping to get something more like:
    Screenshot_responsive.jpg

    Appreciate your help Perry. Thank you!

    Attachments:
    You must be logged in to view attached files.
    #44383

    Perry
    Moderator

    Hi there

    Please go to Maps -> Settings -> Advanced and paste the following in custom CSS:

    @media all and (max-width: 640px)
    {
     .wpgmza_sl_main_div>*>*:first-child
     {
        display: block !important;
        float: none;
     }
    }

    You can tweak the 640 pixel threshold to taste.

    I hope that helps?

    Kind regards
    – Perry

    #44435

    johnnyeng
    Member
    This reply has been marked as private.
    #44454

    Perry
    Moderator

    Hi Johnny

    Thank you for that.

    Have you moved your map to another page?

    I visited your home page and couldn’t see any maps, nor any other links referred to in this thread.

    Could you please clarify on that?

    Kind regards
    – Perry

    #44462

    johnnyeng
    Member
    This reply has been marked as private.
    #44463

    Perry
    Moderator

    Hi Johnny

    My apologies for any confusion there, I can see you’ve linked us to that already, my bad.

    I visited that page and added the CSS provided into my live editor, the code definitely works for getting the labels and input fields on separate lines.

    Could you please try again and make sure you clear your cache or do a hard refresh (Ctrl + F5)?

    Could you possibly open a ticket at https://www.wpgmaps.com/contact-us/ so we can check that was correctly installed and tweak as necessary?

    Kind regards
    – Perry

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.