I seem to have a strange line that appears under one of my headers, H2.
Code used was from mail chimp to input a subscribe form within the footer
and automate the subscribe process.
Here is the code:
<div id="mc_embed_signup">
<form action="*" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Want some inbox loving?</h2>
<h3>Sign up for Cute Pink Boutique new brand clothing releases and
news</h3>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk"> </span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
</div>
Also, to give you a better idea, here is a screenshot of the line under the header.
The platform is wordpress.
Screenshot of problem
Any help would be much appreciated.
Check the css of the header element by right clicking on it with to inspect the element. It must be having the attribute of either border-top or border-bottom i.e
#mc_embed_signup_scroll h2{
border-bottom: 1px solid #eee;
}
So find out
Related
In materialize.css, we can add form validation using the .validate class. The default behavior is to underline with green if validation passes, and with red if it fails. In my stylesheet I'm also using:
input:focus
{
border-bottom: 1px solid #03a9f4 !important;
}
to change the underline color to light blue when entering information into the form. However, materialize's default behavior and my manually set color conflict, resulting in the following when I'm entering information after a form failure:
This error also occurs when validation is successful (although it's a bit more subtle due to less contrast between these colors):
Is there a workaround for this? The HTML in my <body> tags used for these forms can be found below:
<div class="container">
<div class="row">
<div class="input-field col s12">
<input placeholder="Email" id="emailInput" type="email"
class="center-align validate">
<span class="helper-text" data-error="Please enter a valid email"</span>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input placeholder="Password" id="passInput" type="password"
class="center-align validate">
<span class="helper-text" data-error="Password cannot be blank"</span>
</div>
</div>
</div>
I'm looking to get this email subscribe form from MailChimp to appear all on one single horizontal line. Here is how it appears now:
I'd like for the wording to display how it currently is, and have the input field for email and the Subscribe button all on the same line.
Here is the code I am currently using:
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#546C7C; clear:left; font:14px Helvetica,Arial,sans-serif; width:300px; color: #fff;}
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//Gaylebrickman.us15.list-manage.com/subscribe/post?u=48a6b6c222ef150a6559c63df&id=bf44114a3d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">For Mindfulness Events and Tips</label>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_48a6b6c222ef150a6559c63df_bf44114a3d" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
Just add the following CSS to your <style> tag:
#mc_embed_signup input.email,
#mc_embed_signup input.button {
display: inline-block;
}
The external stylesheet sets the display property to block for both of these elements, so this will override it and put them on the same line.
You only have to shift <div id="mc_embed_signup_scroll"> to below <label for="mce-EMAIL">For Mindfulness Events and Tips</label>.
And then you have to add this anywhere in the code:
<style>
#mc_embed_signup_scroll {display: inline}
</style>
I'm trying to style the superslim Mailchimp form to go onto our homepage. I've created a new div to wrap it all in, and copied and pasted the code in and currently it appears below:
<div class="mailChimp">
****Copied Code****
<form action="blahblahblah" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Email Address" required>
</div>
<div class="clear">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded- subscribe" class="button">
</div>
Then in my CSS:
#mailChimp{
max-width:245px;
margin-left: 55px
}
#mce-EMAIL{
margin-bottom: 5px;
margin-top: 5px;
width: 95%
}
#mc-embedded-subscribe {
margin-bottom: 5px;
margin-top: 5px;
}
Now, this seems to have the correct IDs attached as it appears correctly in Dreamweaver. However, when I upload the files to the server then none of the CSS styling is applied.
None of the css is applying, which is frustrating! Even the div ID mailChimp isn't. I can't even find it in the inspected element.
Am I selecting the ID's incorrectly?
The main confusion comes from the fact that It appears correctly in Dreamweaver which is reading from the style sheet, but not when I upload both files live.
'mailChimp' is a class, so it starts with a . in the css not a #:
.mailChimp{
max-width:245px;
margin-left: 55px;
}
The margin-left had not been closed with a ;. Also, in mce-email, you have not closed the width tab with a ;.
In your css, you have '#mc-embedded-subscribe' but in the HTML is it written with a big gap between embedded- and subscribe.
Simple question, and undoubtedly an easy solution--I'm just having a lot of trouble finding it despite searching SO and Google for a while.
All I'm looking to do is take the snippet of text "I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information)" and having it aligned to the right of the check box (with the text left aligned), but not wrapping around it like it is now.
Here's my JSFiddle
Code (using PureCSS for styling):
<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="name">Product Name</label>
<input id="name" type="text" placeholder="Username">
</div>
<div class="pure-control-group">
<label for="password">Contact Name</label>
<input id="password" type="text" placeholder="Password">
</div>
<div class="pure-control-group">
<label for="email">Contact Email</label>
<input id="email" type="email" placeholder="Email Address">
</div>
<div class="pure-control-group">
<label for="foo">Website</label>
<input id="foo" type="text" placeholder="Enter something here...">
</div>
<div class="pure-control-group">
<label for="foo">Description:</label>
<textarea id="description" type="text" placeholder="Enter description here..."></textarea>
</div>
<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox">
I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information)
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
Any help would be much appreciated. Thanks.
Here's a simple way. There are probably others.
<input id="cb" type="checkbox" style="float: left; margin-top: 5px;>">
<div style="margin-left: 25px;">
I'm interested in an enhanced listing or premium profile,
(a member of our team will respond promptly with further information)
</div>
I used a div to "block" structure the text and moved it to the right. The float: left on the input keeps the checkbox to the left of the text (not above). The margin-top on the input tweaks the top alignment with the text.
The fiddle.
This is the method, that I used. It worked better for me than the many other methods I found on SO.
LABEL.indented-checkbox-text
{
margin-left: 2em;
display: block;
position: relative;
margin-top: -1.4em; /* make this margin match whatever your line-height is */
line-height: 1.4em; /* can be set here, or elsewehere */
}
<input id="myinput" type="checkbox" />
<label for="myinput" class="indented-checkbox-text">I have reviewed the business information and documentation above, and assert that the information and documentation shown is current and accurate.</label>
Try floating the check box left, and then wrap the text in a div with "overflow: hidden;". Maybe additionally, add some padding as I did below to give the text some breathing room from the check box (the padding is optional though).
<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox" style="float: left;">
<div style="overflow: hidden; padding: 0px 0px 0px 5px;">
I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information)
</div>
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
I'm working on a simple landing page for a site and my form wont align to the center. If you take a look here you can see that it is slightly offset to the right. I've tried adding a container div around the form and well, setting it as a block with margin:0 auto as well, but nothing changes. I've also tried setting class="span6 offset 3" to align it in the center but that little offset still remains. I have a feeling that all the divs inside other divs are building up some sort of margin on, but I can't seem to figure out how to fix it.
Here's my HTML code:
<div class="row">
<div class="span3"></div><!--/.span3-->
<div class="span6">
<div class="well span6" align="center">
<form id="contact-form" name="contact-form" method="post" action="form-processing.php">
<input class="span6" name="Name" id="Fname" type="text" placeholder="Your name" required>
<input class="span6" name="Email" id="Email" type="email" placeholder="Your email" required>
<input class="span6" name="Message" id="Message" type="text" rows="3" placeholder="What's on your mind?" required><br>
<button type="submit" class="btn btn-primary" id="button">Submit</button>
<button type="reset" class="btn">Clear</button>
</form>
</div><!--/.well span6-->
</div><!--/.span6-->
<div class="span3"></div><!--/.span3-->
</div><!--/.row-->
And here's my non-Bootstrap CSS code:
h1 {font-family: marvel, serif; color:#060; font-size:90px; -webkit-text-stroke: 1px white;}
h2 {font-family: marvel, serif; color:#CCC; font-size:50px; -webkit-text-stroke: 1px black;}
p {color:white; font-size:20px;}
body{
padding: 40px;
margin:0 auto;
background-image: url(../img/background.jpg);
background-repeat: repeat;
background-position: center center;
}
.welcome {padding:30px 0 0 0;}
#Message {overflow:hidden;}
.well {margin:0 auto;}
.navbar-fixed-top,.navbar-fixed-bottom{position:fixed}
If you can figure out what the problem is I'll bake you a pie or something. Thanks.
Here is my new code that I typed out, which is almost identical to the previous, with the omission of a span6 class. Everything is lined up perfectly now.
<div class="row">
<div class="span3"></div><!--/.span3-->
<div class="well span6" align="center">
<form id="contact-form" name="contact-form" method="post" action="form-processing.php">
<input class="span6" name="Name" id="Fname" type="text" placeholder="Your name" required>
<input class="span6" name="Email" id="Email" type="email" placeholder="Your email" required>
<textarea class="span6" name="Message" id="Message" type="text" rows="3" placeholder="What's on your mind?" required></textarea><br>
<button type="submit" class="btn btn-primary" id="button">Submit</button>
<button type="reset" class="btn">Clear</button>
</form>
</div><!--/.well span6-->
<div class="span3"></div><!--/.span3-->
</div><!--/.row-->
I recommend not editing the bootstrap css but including your own css as you've done above. Create an id for the specific you want centered and then pad it until it works. Looks like the bootstrap css interfered with your own css causing the problems. It works now so if you think it's important remember to you only your own css when you want to make changes in the future. One final thing, have the bootstrap page open it gives you an idea of what the spans and rows look like before including them in your page.
It looks like the padding on your "well" class is adding width to bootstrap's span6 class.
You could take the box-sizing route by adding "box-sizing: border-box;" to your well class or by targeting that specific div and reducing the width from 570px (bootstrap's span6 width) to 532px (19px padding on left and right).
Hope that helps.
Remember that for bootstrap theres the '-offset-' class which is very helpful when it comes to aligning items. For example you could use "col-md-12 col-md-offset-2" or for a span6 "col-lg-6 col-lg-offset-3".