Almost Ready with a new site but one issue needs resolved in Instagram Widget

Design help General
2

Hey @jdesign

Just had a quick look - the issue seems to be with the CSS Stylesheet the Constant Contact form is using. Its here at the top of the embed code:

<link rel='stylesheet' type='text/css' href='https://static.ctctcdn.com/h/contacts-embedded-signup-assets/1.0.2/css/signup-form.css'>

That CSS file is setting the minimum width of the form to 350px on all screens, which is causing the overflow issue.

All easily fixed by adding a few lines of CSS for smaller screens. This updated code should do the trick:

<!--Begin CTCT Sign-Up Form-->
<!-- EFD 1.0.0 [Mon Aug 17 22:29:04 EDT 2015] -->
<link rel='stylesheet' type='text/css' href='https://static.ctctcdn.com/h/contacts-embedded-signup-assets/1.0.2/css/signup-form.css'>
<style>
    @media (max-width: 767px) {
.ctct-custom-form {
    font: 16px Helvetica Neue,Arial,sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-width:200px;
    margin:0 auto;
    box-sizing:border-box;
    padding: 15px;
}
    }
</style>
<div class="ctct-embed-signup" style="font: 16px Helvetica Neue, Arial, sans-serif; font: 1rem Helvetica Neue, Arial, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased;">
   <div style="color:#5b5b5b; background-color:rgba(0,0,0,0); border-radius:5px;">
       <span id="success_message" style="display:none;">
           <div class="ctct-thanks">Thanks for signing up!</div>
       </span>
       <form data-id="embedded_signup:form" class="ctct-custom-form Form" name="embedded_signup" method="POST" action="https://visitor2.constantcontact.com/api/signup">
           <!-- The following code must be included to ensure your sign-up form works properly. -->
           <input data-id="ca:input" type="hidden" name="ca" value="ca90e1b2-3d71-43b9-9666-37cd5df1017c">
           <input data-id="list:input" type="hidden" name="list" value="1">
           <input data-id="source:input" type="hidden" name="source" value="EFD">
           <input data-id="required:input" type="hidden" name="required" value="list,email">
           <input data-id="url:input" type="hidden" name="url" value="">
           <p data-id="Email Address:p" ><label data-id="Email Address:label" data-name="email" class="ctct-form-required"></label> <input data-id="Email Address:input" type="text" name="email" value="Email Address" maxlength="80" class="ctct-placeholder"></p>
           <p data-id="First Name:p" ><label data-id="First Name:label" data-name="first_name"></label> <input data-id="First Name:input" type="text" name="first_name" value="First Name" maxlength="50" class="ctct-placeholder"></p>
           <button type="submit" class="Button ctct-button Button--block Button-secondary" data-enabled="enabled">Sign Up</button>
       	<div><p class="ctct-form-footer">By submitting this form, you are granting: Dressed Boutique, 108 S. Woodland Blvd. Suite B, DeLand, Florida, 32720, United States, http://www.dressedboutique.com permission to email you. You may unsubscribe via the link found at the bottom of every email.  (See our <a href="http://www.constantcontact.com/legal/privacy-statement" target="_blank">Email Privacy Policy</a> for details.) Emails are serviced by Constant Contact.</p></div>
       </form>
   </div>
</div>
<script type='text/javascript'>
   var localizedErrMap = {};
   localizedErrMap['required'] = 		'This field is required.';
   localizedErrMap['ca'] = 			'An unexpected error occurred while attempting to send email.';
   localizedErrMap['email'] = 			'Please enter your email address in name@email.com format.';
   localizedErrMap['birthday'] = 		'Please enter birthday in MM/DD format.';
   localizedErrMap['anniversary'] = 	'Please enter anniversary in MM/DD/YYYY format.';
   localizedErrMap['custom_date'] = 	'Please enter this date in MM/DD/YYYY format.';
   localizedErrMap['list'] = 			'Please select at least one email list.';
   localizedErrMap['generic'] = 		'This field is invalid.';
   localizedErrMap['shared'] = 		'Sorry, we could not complete your sign-up. Please contact us to resolve this.';
   localizedErrMap['state_mismatch'] = 'Mismatched State/Province and Country.';
	localizedErrMap['state_province'] = 'Select a state/province';
   localizedErrMap['selectcountry'] = 	'Select a country';
   var postURL = 'https://visitor2.constantcontact.com/api/signup';
</script>
<script type='text/javascript' src='https://static.ctctcdn.com/h/contacts-embedded-signup-assets/1.0.2/js/signup-form.js'></script>
<!--End CTCT Sign-Up Form-->

Hope that helps :smile:

1 Like