Wufoo integration acting funny (different size options on different pages)

LiveAwake · April 30, 2015

I'm trying to add a Wufoo form to a new gallery that I'm creating. It's working fine, except that when I go into the dimensions option, the container width only allows me to set a desired % (whereas on another page it allows me to set a desired number of pixels).

The only thing I can think of is that one is on a "page" and the other is on a customized "gallery." I need the new one to be a gallery, because I want to allow print ordering.

Is there a way to specify a desired number of pixels for the container width of a wufoo form that is added below a gallery, rather than a percentage?

Thanks!

Allen · April 30, 2015

I would guess it has to do with setting the page to stretchy vs a set width. Might have to get the
container class ID and set a width in CSS.
width: XXXpx;
margin: 0 auto;

LiveAwake · May 1, 2015

Hmm, well I tried setting the gallery to a fixed width instead of stretchy, and it did shrink the Wufoo form, but it also made the photo above get smaller, which won't do.

There is a CSS placeholder at the top where I can modify the CSS for the page, but how do I find the container class ID in order to use CSS to set a width for the Wufoo form?

Thanks!

LiveAwake · May 19, 2015

Anyone?

Teach · May 21, 2015

LiveAwake

Can we have a link to that gallery so we can take a look at it and see if we can make any recommendations?

LiveAwake · May 21, 2015

Yes, it's currently unlisted, but you can see it here.

rainforest1155 · May 22, 2015

Looking at the form in your gallery using differently sized browser windows, I'm not able to see any issue. The form does scale with the browser window, but that is expected and I don't see any formatting issues.
If you're seeing any issue, perhaps you could take a screenshot of what you see along with a few more details?
In case there's no issue, could you elaborate on what exactly you're trying to achieve?

In regards to targeting the form, you could use the ID for it (sm-page-widget-S68WZ6zV) or the class (sm-page-widget-body). Both, I located with the use of the webdeveloper tools by right clicking on the form and picking the inspect option in my Firefox.

LiveAwake · May 22, 2015

Thank you Sebastian.

I'm trying to make the form be a fixed width, rather than filling the screen from edge-to-edge. I tried putting this in my CSS on that page, but to no effect:

.sm-page-widget-S68WZ6zV
{
width: 800px;
}

I tried the same with the "sm-page-widget-body" tag, and it did work, however it also affected my header and nav-bar, which won't do.

LiveAwake · May 22, 2015

After poking around quite a bit and trying everything that seemed reasonably possible, I believe solved it with this code in my CSS block:

.sm-page-widget-wufoo
{
width: 850px;
margin-left: auto;
margin-right: auto;
}

If anyone with more code know-how than myself sees any reason that might cause problems, please let me know.
Thanks!

rainforest1155 · May 24, 2015

I'm glad to hear that you were able to get it working after all. Looks good to me!

Wufoo integration acting funny (different size options on different pages)

Comments