• Resolved djmorgan911

    (@djmorgan911)


    Google Search Console says my site has Mobile Usability Issues, “Content wider than screen”. The page is my PDB signup form and yes it is not very usable from a mobile phone. I haven’t seen any documentation regarding making this responsive but I tried template=responsive and template=bootstrap just in-case, neither with any resolve. Is there a way to make the PDB signup form responsive?

Viewing 15 replies - 1 through 15 (of 28 total)
  • Plugin Author xnau webdesign

    (@xnau)

    The signup shortcode has a bootstrap template, but whether it’s responsive or not really depends on how your theme is displaying the form. If your theme is responsive, it normally happens without much tweaking. If your theme is not responsive, you’ll have to work it (adjust the CSS) to get the result you want.

    Thread Starter djmorgan911

    (@djmorgan911)

    Thanks, I am using OceanWP as my theme so it is responsive. I would have though it would do good with the form.

    Plugin Author xnau webdesign

    (@xnau)

    I’ve never used a WordPress theme that didn’t need custom CSS to help with some of the details, so not surprising. You may be able to get some more specific guidance from the theme developer.

    Thread Starter djmorgan911

    (@djmorgan911)

    Ok thanks.

    Thread Starter djmorgan911

    (@djmorgan911)

    The author of the 5 star rated theme with over 300k installations has had this to say (and I fully agree).

    “Because it uses table which is not very good for responsiveness and it should be the plugin author to add CSS to make the table fully responsive.”

    Unfortunately I am caught in the middle of the finger pointing from both sides. Without resolution I will be forced to abandon PDB although I would hate to because it does exactly what I need and want it to do.

    Plugin Author xnau webdesign

    (@xnau)

    Yes, they are correct, tables are not responsive, and so the plugin provides two built-in templates for the list display that are responsive and do not use tables: “responsive” and “flexbox.”

    I know that providing the basic HTML and CSS for a responsive display does not result in a display that works for any given theme. It’s not possible for a plugin developer to provide “out of the box” display that work for all themes, especially considering that everyone has a different idea of what that should look like.

    So, in response to that, I have provided the basic ingredients for a responsive display and the support for modifying that display (custom CSS and templates) so that you can get the desired result. I recognize that it does take some technical knowledge to achieve that.

    I would suggest you choose one of the two responsive templates for your list display and using that as a starting point, think about how you want it to display. If you can’t figure out how to achieve that, come back here with specific questions about what you’re trying to do. It will be a lot easier to provide helpful responses that way.

    Plugin Author xnau webdesign

    (@xnau)

    Re-reading this, I see that you are asking about the signup form. The signup form has the “bootstrap” template that you should use as your starting point for setting up your responsive display.

    Thread Starter djmorgan911

    (@djmorgan911)

    So here’s the weird thing. When I use:
    [pdb_signup template=bootstrap]
    My form will not even show up.

    That’s what I’m experiencing. It used to be ok.

    I just want the form to look ok on an iPhone. So I’ve written at the top of the form “If you are using an iPhone to complete this form you might want to rotate it through 90 degrees!”

    • This reply was modified 5 years, 8 months ago by humpty2.
    Plugin Author xnau webdesign

    (@xnau)

    Well, without seeing it, I can’t say, but I suspect that the theme CSS is somehow making the form not visible. You’ll need to inspect the HTML so see exactly what is happening.

    If the display needs to be rotated to see it, then it is trying to be too wide, you will need to add CSS that lets the width of the form respond to the screen width. The native plugin code does this, but themes will often set other values that change the layout and in some cases break it.

    I have a similar problem: [pdb_signup template=bootstrap] gives a page containing only the “Sign Up” button. All the fields are shown when using the default template.

    This is in a customised Gantry theme with custom CSS that affects the layout of the framework of the page, but I have removed CSS that affected inner contents of the page, including the layout of the [pdb_record template=bootstrap] page which displays OK.

    Looking at the page source in Firefox there is no sign of any of the fields, so nothing for the CSS to work on. I tried giving explicit field names, but none appeared.

    Plugin Author xnau webdesign

    (@xnau)

    Fields that you want in the signup form must be configured to do so in the Manage Database Fields page. The “signup” checkbox must be checked for each field you want in the form.

    All the fields (except Record Info ones) have “Signup” boxes ticked in the Manage Database Fields page. Isn’t this why they are all shown when the Default template is used? How are they treated differently when the Bootstrap template is used? Is there something extra I need to do as well as just adding template=bootstrap in the shortcode?

    Plugin Author xnau webdesign

    (@xnau)

    The bootstrap template doesn’t need anything different, just [pdb_signup template=bootstrap]

    I just tested this and it’s working as expected.

    Are you getting any errors in your php error log when you display the signup form?

    Thanks for your prompt reply.

    Nothing written to php_error.log. Just some GET messages in access.log, mostly for Gantry’s theme.

    Is there any way for me to get more debugging info that might help? I am developing the pages in WampServer in Windows 7 on my PC, so everything is local.

Viewing 15 replies - 1 through 15 (of 28 total)
  • The topic ‘[pdb_signup] Responsive?’ is closed to new replies.