1. 

   savio
   

   offline

   Member

   Hello, I am facing what should be a simple task, but nothing seems to be working.
   I have a Coffee Cup Form that I want centered in my Harmony Column that is left aligned.

   I have tried wrapping it in a div and setting the class as margin: auto, width 100%
   I have tried the div class to be text-align: center
   I even tried putting it in a paragraph tag with center alignment

   Nothing seems to work.

   I seem to be missing something rudimentary as I know I have done this in the past and can't seem to recall what I have to do to get this to work! TIA for your help!

   Page is:
   https://vcard.castleknights.us/

   Posted 4 months ago
2. 

   savio
   

   offline

   Member

   I was able to figure this out! Issue was a css setting I needed in the form's css file - not on my site/harmony page!

   Posted 4 months ago
3. 

   Gerry
   

   offline

   PVII Team

   The .divcenter class you have assigned to the div that contains the iframe form currently looks like this:

   .divcenter {
   width: 100%;
   margin: auto;
   }

   In order to have it render centered you need to specify a width, 100% by itself will not affect ti since it already spans the entire width. Add a max-width: 800px to the rule and you'll see it center in viewports greater than 800px wide (plus padding and margins). I suggest 800px because that is the max-width value that is assigned to the actual form by the form code.

   It should look like this:

   .divcenter {
   width: 100%;
   margin: auto;
   max-width: 800px;
   }

   Posted 4 months ago
4. 

   savio
   

   offline

   Member

   The .divcenter class you have assigned to the div that contains the iframe form currently looks like this:
   .divcenter {<br />
   width: 100%;<br />
   margin: auto;<br />
   }
   In order to have it render centered you need to specify a width, 100% by itself will not affect ti since it already spans the entire width. Add a max-width: 800px to the rule and you'll see it center in viewports greater than 800px wide (plus padding and margins). I suggest 800px because that is the max-width value that is assigned to the actual form by the form code.
   It should look like this:
   .divcenter {<br />
   width: 100%;<br />
   margin: auto;<br />
   max-width: 800px;<br />
   }

   Thanks so much - would this be better than the current solution I found that seems to work:
   In the form's default.css file

   margin: 40px auto;
   changed to
   margin: auto!important;

   this seems to have worked...but should I do your solution instead? Is one better than the other?

   Posted 4 months ago
5. 

   Gerry
   

   offline

   PVII Team

   Either approach is fine, it all depends on whether you have access to the form css. Since you do have access to the form css then make the change there.

   Posted 4 months ago
6. 

   savio
   

   offline

   Member

   thanks so much Gerry!

   Posted 4 months ago

RSS feed for this topic

Reply

You must log in to post.