How can I center embed a SurveyGizmo Survey on wordpress?

I am trying to embed a SurveyGizmo survey via the CodeEmbed plugin and am having trouble getting it to center on my page. I am barely a script kiddy so I feel as though this frustrating problem for me should be easily solved by an expert. I used <div align="center"> around the embed code which centered the text but the radio buttons still align left. SurveyGizmo offers Iframe, html, and Javascript embed options and so far, Iframes and html cause a specific sized box to appear with scrolling while the Javascript works well and appears to be responsive, but I can't seem to get the radio buttons to proportionately center with the text. I assume this can be solved with some simple CSS or Javascript but haven't been able to find a solution myself.

I am currently at my day job (this is for my side project that I wish to replace the day job) and so do not have the specific embed code for SurveyGizmo but can provide that later if needed.

Otherwise, for troubleshooting purposes, I have just been setting up temporary 1 week accounts under "standard license" until I'm able to figure this out and purchase a license. Doing that and attempting to center embed a survey on a fresh WP page will bring you exactly where I am.

Thank you for your time and help!

  • Patrick

    Hi there Optibrand Solutions

    I hope you're well today!

    Yep, if you can provide the actual, embed code you're using, that would be great. We could add it to a test site to get it properly set up.

    Or, if you could provide a link to your site where the embed can be seen live on your page, that would be even better. Quite often, there is some CSS in the active theme that interferes with the display of embedded elements.

    • Mark

      Hey, Patrick!

      Thanks for your quick reply. I am well, thanks; I hope you are as well!

      http://ts.optibrand.solutions/test/

      Above is a link to a page that has the embed on it.

      The embed code I'm attempting to use is:

      <script type="text/javascript" >document.write('<script src="http' + ( ("https:" == document.location.protocol) ? "s" : "") + '://www.surveygizmo.com/s3/3439726/New-Survey?__no_style=true&__output=embedjs&__ref=' + escape(document.location.origin + document.location.pathname) + '" type="text/javascript" ></scr'  + 'ipt>');</script><noscript>Ask questions, get results from <a href="https://www.surveygizmo.com/" title="Online Survey Software">www.surveygizmo.com</a>. <a href="http://www.surveygizmo.com/s3/3439726/New-Survey?__no_style=true&?jsfallback=true">Please take my survey now</a></noscript><style>.sg-survey{display:none; }</style>

      SurveyGizmo also offers the ability to apply custom CSS, HTML, and <head> code to your survey prior to generating an embed code, but I unfortunately am not currently skilled enough to use these functions and the closest thing I can find for support on that is here

      Ultimately, I'm trying to create a responsive survey that's centered on a full-screen, video or image background.

      Thanks again for taking the time to help! I really appreciate it!

      -Mark

  • Patrick

    Hi again Optibrand Solutions

    Add the following CSS to a custom CSS area in your theme, the WordPress Customizer, or use a handy little plugin like this one:
    https://en-ca.wordpress.org/plugins/simple-custom-css/

    .sg-type-checkbox ul.sg-labels-right input.sg-input-checkbox, .sg-type-radio ul.sg-labels-right input.sg-input-radio {left:auto;}

    That should get things centered like this in your theme:

  • Mark

    Hey, Patrick

    That looks perfect!

    Unfortunately, I cannot seem to replicate your results. I tried putting that code into wordpress customizer, the CSS area for my theme (which they state is in the header and just showed up as text in the header) and installed the plugin and entered the code into that, all with virtually no change. I did each of those individually as I was unsure if having it in two areas may cause conflict.

    Finally, I just created a new sub-domain (test.optibrand.solutions) wiped out most all of the default content, and tried it with the default theme. That at least brought the radio buttons over a bit, but not quite to the degree of yours and ts.optibrand.solutions/test is still more centered.

    Perhaps my theme is the culprit.
    Are you using a custom theme or did you use the default?
    Should that not matter?

    Each of the above domains is currently running the plugin and your provided code if that helps any.

  • Mark

    Update: I apparently locked myself out of that survey login, created a new survey account, applied that code to the CSS area of the survey, and then embedded that on a new page:

    Optibrand.Solutions/test

    And that appears to be working like a charm! Still a little unsure why applying the CSS to WP isn't working but the end result is there and I'm tremendously appreciative! I'll be tinkering with variations of that layout and the survey options for quite some time and hopefully it continues working. Given the CSS code is applied directly to the survey, I think it will.

    Thanks again for the help, Patrick!
    As you can likely tell, I'm new to WPMUDEV and you've absolutely sold me on sticking around!

    Have a great day!

  • Patrick

    Hi again Optibrand Solutions

    It's not a really good idea to add CSS to the theme header, as that adds bloat to that file which must be loaded before everything else.

    But it's odd that it didn't work as expected in the Customizer or the plugin. The only thing that CSS is doing is targeting an element (the radio buttons & checkboxes if there are any in the embed) that is specific to that embed code.

    So there should not be anything theme-related that interferes, and it would apply regardless of the theme used. The proof of that is that the CSS does work as seen on your site now.

    And I'm very glad to hear that you'll be staying with us; we love our members! :slight_smile:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.