I am trying to use contact form 7 to create a custom–styled form. I am using WP Joints theme with foundation.
The first 4 fields are not editable in chrome or firefox, but the comment field is. All fields work in IE (strangely enough). What am I doing that is causing this? The styling needs to be this way for a client but I am probably using certain CSS that is altering the final product.
Link to the site
HERE IS THE CSS
#contact-bb {
background-image: url("http://delindesign.com/adlhochgroup/wp-content/uploads/2016/10/contact-bg.jpg");
background-repeat: no-repeat;
background-position:0% 30%;
background-size: 100%;
}
.contact-header {
font-family: 'Source Sans Pro', sans-serif;
font-size: 2rem;
font-weight: 600;
line-height: 1.2;
color: #8ca408;
text-align: center;
padding: 3rem 0 3rem 0;
}
#first_margin {
margin-bottom:.5rem !important;
}
#comments_margin {
padding-top:.5rem !important;
}
.wpcf7-email {
margin-bottom: .5rem !important;
}
.wpcf7-text {
background-color: #efefef;
}
.wpcf7-textarea {
background-color: #efefef;
}
.wpcf7-submit {
font-family: 'Source Sans Pro', sans-serif;
font-size: 20px;
color: #FFFFFF;
text-align: center;
border: none;
padding: .5rem 4rem .5rem 4rem;
display: inline-block;
margin: 0 0 1rem 0;
background-color: #8ca408;
}
span.wpcf7-not-valid-tip { display: inline !important;}
#cf7-left {
padding: 0 .5rem .5rem 0 !important;
}
#cf7-right {
padding: 0 0 .5rem 0 !important;
}
.wpcf7-text {
margin-bottom:0;
}
#no-pad {
padding:0 !important;
}
.pad-left-1c {
padding-left: 5rem;
}
.bold-contact {
font-family: 'Source Sans Pro', sans-serif;
font-size: 1.125rem;
font-weight: 700;
margin-bottom: .5rem;
line-height: 1.33;
color: #333333;
text-align: left;
}
#contact-padding{
padding-top: 1.8rem !important;
}
.reg-contact {
font-family: 'Source Sans Pro', sans-serif;
font-size: 1.125rem;
font-weight: 400;
margin: auto;
line-height: 1.33;
color: #333333;
text-align: left;
}
and the form
<div id="cf7-left" class="large-6 small-6 columns">
[text* firstname placeholder id:first_margin akismet:author "First Name"]
[text lastname placeholder "Last Name"]
</div>
<div id="cf7-right" class="large-6 small-6 columns">
[email email placeholder "Email"]
[text company placeholder "Company"]
</div>
<div class="large-12 pad-top">
[textarea* comments placeholder id:comments_margin "Comments"]
[submit id:submit-button "Submit"]
</div>
The problem was my putting them in foundation rows and tables. The fields in foundation were editable. My solution was just making a div with display: table and making the fields 50% width table cells float left. It has worked across all browsers so far.
Related
How to get the text wrapped under the points?
https://codepen.io/neginbasiri/pen/ZEGReRZ
<div class="pointLine__PointLine-wgyo1p-1 bUhvVh">
<svg class="icon--icon--base--17 pointLine__RooIcon-wgyo1p-0 iBQvHK">IMAGE</svg>
<div class="pointLine__Content-wgyo1p-2 cPwDGx"><div class="pointLine__Point-wgyo1p-3
pointLine__DefaultPoint-wgyo1p-4 enMiay">16,000</div><p class="Text__StyledText-zy9rxk-0 dufgDt">
Points when you join or switch <span id="super-node-187"><sup class="super--super--root--13">
<span>3</span></sup> </span></p></div>
In the example switch should show under 16,000.
.bUhvVh {
display: flex;
margin-bottom: 20px;
width: 300px;
}
.iBQvHK {
color: #e40000;
font-size: 24px;
margin-right: 10px;
border: 1px solid red;
width: 20px;
}
.icon--icon--base--17 {
height: 1em;
min-width: 1em;
vertical-align: middle;
fill: currentColor;
}
.cPwDGx {
font-family: Ciutadella Regular;
font-size: 18px;
color: #555;
letter-spacing: normal;
line-height: 1.5;
}
.enMiay {
float: left;
font-family: Ciutadella Medium;
margin-right: 4px;
position: relative;
color: #323232;
}
.dufgDt {
margin: 0;
font-family: 'Ciutadella Regular',sans-serif;
font-size: 18px;
color: #555;
letter-spacing: normal;
line-height: 1.5;
}
<div class="pointLine__PointLine-wgyo1p-1 bUhvVh">
<svg class="icon--icon--base--17 pointLine__RooIcon-wgyo1p-0 iBQvHK">IMAGE</svg>
<div class="pointLine__Content-wgyo1p-2 cPwDGx"><div class="pointLine__Point-wgyo1p-3 pointLine__DefaultPoint-wgyo1p-4 enMiay">16,000</div><p class="Text__StyledText-zy9rxk-0 dufgDt"> Points when you join or switch <span id="super-node-187"><sup class="super--super--root--13"><span>3</span></sup> </span></p></div>
</div>
Remove display: flex; flex: 1 from .cPwDGx.
Remove display: inline-block from .enMiay and add float: left for this element.
Update width to min-width for icon--icon--base--17. It will not shrink if text is larger.
Refer : https://codepen.io/bala_tamizh/pen/WNvyEPg
I have a piece of code that isn't working on Windows/Android but works fine on OSX and Linux. I know it has something to do with the CSS, but I can't figure out the issue. All the data in the select boxes don't display in the box. Both images below have the same values chosen.
Windows
OSX
Here is my code:
CSS
input::placeholder {
color: dodgerblue;
}
.filter-form {
font-size: .75em;
}
.filter-form select {
color: dodgerblue;
border-radius: 0;
margin: 0px;
padding: 15px;
display: block;
height: 35px;
width: 100%;
border: 1px solid dodgerblue;
font-family: "PT Sans", "Helvetica", sans-serif;
font-weight: bold;
}
.filter-form input {
color: dodgerblue;
border-radius: 0;
margin: 0px;
padding: 15px;
display: block;
height: 35px;
width: 100%;
border: 1px solid dodgerblue;
font-weight: bold;
font-family: "PT Sans", "Helvetica", sans-serif;
}
And the code from the page:
<div class="product-filter">
<h3>Filter By:</h3>
<div class="sort">
<div class="collection-sort filter-form">
<form method="get">
{{ filter.form.as_p }}
<button class="btn-a btn-a_size_small btn-a_color_theme" type="submit"
style="margin:10px 0;">Filter Results
</button>
</form>
</div>
</div>
</div>
Here is a snippet from some generated html I am trying to style. Why does the date align to the top but the link inside the h3 doesn't?
Using dev tools I can see the link is centrally aligned to the h3 vertically but I cant alter it in any way I have tried with vertical-align or by adjusting height.
article {
width: 400px;
}
article .date_posted {
float: right;
font-size: 12px;
}
article div.thumbnail {
margin-right: 10px;
width: 100px;
height: 75px;
float: left;
box-shadow: 0 0 0 4px #fff, 0 0 0 5px red;
vertical-align: text-top;
}
article div.title h3 {
display: inline;
}
article div.title h3 a {
font-size: 14px;
font-family: Lato, sans-serif;
font-weight: 900;
color: red;
}
article:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
<article>
<div class="uposts-part thumbnail" data-resize="1">
<img width="288" height="230" src="http://site3.wpmu-subdomain.dev/wp-content/uploads/sites/3/2015/10/0f02bd48-7efe-3934-8f4b-093c81560333.jpg" class="attachment-post-thumbnail wp-post-image" alt="" style="margin-top: -2.5px; height: auto; width: 100%;">
</div>
<div class="uposts-part date_posted">
<span class="date">23</span>, <span class="time">October</span></div>
<div class="uposts-part title">
<h3>Dignissimos deserunt fugiat at sdfsfsd sdfsd s fsdf s ds fds df sdf sdf sd f sd fsd d</h3>
</div>
</article>
JS fiddle: https://jsfiddle.net/xdfc8vnm/
article div.title {
float: left;
width: 233px;
line-height: 1
}
article div .title h3 {
display: inline;
margin: 0;
}
article div.title h3 a {
font-size: 14px;
font-family: Lato, sans-serif;
font-weight: 900;
color: red;
display: block;
}
article .date_posted {
float: right;
font-size: 12px;
line-height: 1;
}
For your class: article .date_posted you need to set same Font Family, Font Size and Font Weight that you used on post title. So it should go like this:
article .date_posted {
float: right;
font-size: 14px; /* from 12px changed to 14px */
text-decoration: underline; /* this line added */
font-family: Lato, sans-serif; /* this line added */
font-weight: 900; /* this line added */
}
Here is an example: https://jsfiddle.net/LddvoLaL/2/
I used a css reset where * selector has
vertical-align:baseline;
Entire theme was build with it, and now, at the very end, I need one div to align top. And it does not. I did specify it in styling, added !important. No luck. I'm sure I'm missing something, but can't figure out what.
So
Css reset * selector part looks like this
* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
Html part
php part of wordpress templates
<li>
<div id="datencomments">
<div id="date3">
<div id="datetxt">
<div class="month"><?php the_time('M ') ?></div>
<div class="day"><?php the_time('j ') ?></div>
</div></div>
<div id="comments"><span class="comments-link"><?php comments_popup_link( __( '1 Comment', 'blankslate' ), __( '% Comments', 'blankslate' ) ); ?></span></div>
</div>
</li>
</ul>
</div>
css for it.
.postpreview ul {
list-style: none;
}
.postpreview ul li {
display: inline-block;
}
#datencomments {
width: 100px;
vertical-align: top !important;
}
#date3 {
width:100px;
height: 100px;
border: 2px solid transparent;
border-radius: 100px;
background-color: #17B1BE;
color: #fff;
text-align: center;
}
.month {
text-align: center;
margin-top: 12px;
text-transform: uppercase;
font-size: 24px;
font-weight: 200;
font-family: 'Exo 2', sans-serif;
}
.day {
text-align: center;
margin-top: -8px;
text-transform: uppercase;
font-size: 40px;
font-family: 'Exo 2', sans-serif;
}
#comments {
margin-top: 20px;
text-align: center;
font-size: 12px;
font-family: 'Droid Serif', serif;
font-style: italic;
text-decoration: underline;
}
the rest is transitions, hover colors etc...
I need #datencomments at the top of the template, while * is pulling it down.
If done like this, display:block puts the text behind the box, display:inline puts it inside on top and display:inline-block puts the text where it is specified with vertical-align.
<div id='container'>
<div id='text'>This is a test</div>
</div>
#container{
height: 200px;border: 5px solid blue;text-align:center;
}
#text,#container:before{
vertical-align: middle;
display: inline-block;
}
#container:before{
content: "";
height: 100%;
}
This is weird. I have a "wrapper" with three columns like this:
http://d.imagehost.org/view/0543/cssproblem
The first column has a picture, the second column has text and the third column has three links. It works fine if the third block has just text and not links (see the top of the linked picture) but when I make links out of the text, the text is no longer side by side (see the bottom of the linked picture).
I just can't understand what's wrong with the code. How can the text in the third column to stay side by side even when they are links?
css:
.wrapper{
margin-left: 45px;
margin-bottom: 4px;
width: 466px;
height: 22px;
}
.first{
width: 22px;
float: left;
}
.second{
width: 266px;
float: left;
}
.third{
width: 178px;
float: right;
}
p.text1 {
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1.2em;
text-align: left;
margin-left: 12px;
margin-top: 3px;
}
p.text2 {
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1em;
text-align: right;
}
a.opt {
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1em;
text-decoration: none;
}
a.opt:visited {
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1em;
text-decoration: none;
}
a.opt:active {
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1em;
text-decoration: none;
}
a.opt:hover {
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1em;
text-decoration: underline;
}
html:
<div class="wrapper">
<div class="first><img src="image.gif" /> </div>
<div class="second"><p class="text1">Some text here</p></div>
<div class="third"><p class="text2"><a class="opt" href="http://">LINK 1</a> | <a class="opt" href="http://">LINK 2</a> | <a class="opt" href="http://">LINK 3</a></p></div>
</div>
My guess is that it's the float: right declaration in your .third class. Try starting by adapting your CSS to look like this:
.wrapper{
margin-left: 45px;
margin-bottom: 4px;
overflow: hidden;
width: 466px;
height: 22px;
}
.first{
width: 22px;
float: left;
}
.second{
width: 266px;
float: left;
}
.third{
width: auto;
overflow: hidden;
}
That eliminates the need for the right-floating div. That should hopefully clean things up enough. If not, I'll modify my answer.