I am seeking assistance with this extra space in front of my message field on the contact form.
When you click to start typing in the message field, it will begin where it says the word "Message." The following lines are in the exact placement.
I hope this is enough for a resolution. Please let me know if there is any additional information I can provide.
Image of contact form: https://imgur.com/a/SFfwREA
.wpcf7-form-control {
width: 300px;
height: 90px;
font-size: 24px;
float:left;
margin: 0;
padding: 0px;
}
/*
.wpcf7-form-control-wrap textarea {
text-indent: -30px;
}
*/
/*CF7*/
.wpcf7-form input {
border-radius:26px;
/* Makes the edges rounded */
}
.wpcf7-form textarea {
border-radius:6px; /* Makes the edges rounded */
}
.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-textarea{
padding-left:50px;
}
.wpcf7 input[type="checkbox"]{
margin:0 !important;
background-color: red !important
}
.wpcf7 p{ position: relative; }
.wpcf7 p .fa{
position: absolute;
color: #152135 ;
z-index: 100;
font-size: 18px;
top: 28%;
left: 3%;
}
.wpcf7 p .fa-pencil{ top: 5%; left: 1.5%}
.wpcf7 label{
font-size: 25px !important;
margin-bottom:5% !important;
}
#responsive-form{
max-width:80%;
margin:0 auto;
width:100%;
padding: 20px 0 20px 0;
}
.column-full{
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.column-half{
float: left;
position: relative;
padding: 0.65rem;
width:50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
/**---- Media query -**/
#media only screen and (max-width: 799px) {
.column-half{
width: 100%;
}
}
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"] {
height:57px;
}
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea, .wpcf7 input[type="tel"] {
width: 85%;
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #cacaca;
font-size: 14px;
color: #3e4644 !important;
background-color: #f0f0f0;
font-weight: 200;
}
/* Contact Form 7 Submit Button
-------------------------------*/
.wpcf7 input[type="submit"] {
color: #ffffff;
font-size: 13px;
font-weight: 700;
background: #E2272E;
padding: 15px 25px 15px 25px;
border: none;
border-radius: 5px;
width: auto;
text-transform: uppercase;
letter-spacing: 5px;
}
.wpcf7 input:hover[type="submit"] {
background: #494949;
transition: all 0.4s ease 0s;
}
.wpcf7 input:active[type="submit"] {
background: #000000;
}
So far I tried to use the text-indent, padding, and margin to adjust it but have had no luck.
The text-indent worked the best because I was able to get the first line to look normal and type normal but when I got to the second line it started doing the same ident. Maybe if there is a way I can get the text-indent to apply to all the lines in the text box?
Lastly, thank you in advance for any help, solution, or suggestion that is provided on this post.
Related
I was tasked with a challenge by a developer to receate this comp with one :before pseudo element and found it outside of my relm of experience, I didn't end up solving the problem but as stated I did manage to recreate the comp with two pseudo element on one selector. Here is a jsfiddle example. http://jsfiddle.net/rt9nbg8j/
body{
width:100%;
margin: 0 auto;
}
h1:before{
border-top:1px solid gray;
border-bottom:1px solid gray;
display:block;
content:"";
height:60px;
width:25%;
float:left;
margin-right:20px;
background:#fff;
}
h1{
height:60px;
display: block;
float:left;
text-align:center;
background:#ccc;
/* border:1px solid red; */
width:100%;
font-size:16px;
font-family:arial;
line-height:4em;
}
h1:after{
border-top:1px solid gray;
border-bottom:1px solid gray;
display:block;
content:"";
height:60px;
width:25%;
float:right;
background:#fff;
}
Here you go.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
text-align: center;
}
h1 {
height: 60px;
display: block;
width: 50%;
margin: 0 auto;
text-align: center;
background: #ccc;
font-size: 16px;
font-family: arial;
line-height: 4em;
padding: 0 2em;
position: relative;
}
h1:before {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%);
content: "";
height: 100%;
width: 100vw;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
}
<h1>Lorem ipsum dolor sit.</h1>
A perfect replica
The solution is to set the title using the :before pseudo-element's content property.
Caveat: This is a poor solution for use in the real world. If this challenge (with its seemingly arbitrary restriction) represents a real-world use case, I suggest refactoring your HTML or CSS to allow for the use of additional markup and/or pseudo-elements or settling for an imperfect (but good enough) replication of the comp.
html,
body {
margin: 0;
padding: 0;
}
h1 {
display: block;
position: relative;
box-sizing: border-box;
width: 100%;
height: 60px;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
background: #fff;
}
h1:before {
content: 'Testing this title';
display: block;
position: absolute;
top: -1px;
right: 25%;
bottom: -1px;
left: 25%;
box-sizing: border-box;
font: bold 16px/60px Arial, sans-serif;
text-align: center;
background: #ccc;
}
<h1></h1>
Update: (just for funsies)
If I were to be literal and true to the challenge to "receate this comp with one :before pseudo element", I would not use any html element other than the de facto body tag.
html {
margin: 0;
padding: 0;
}
body {
display: block;
position: relative;
box-sizing: border-box;
margin: 1em 0;
padding: 0;
width: 100%;
height: 60px;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
background: #fff;
}
body:before {
content: 'Testing this title';
display: block;
position: absolute;
top: -1px;
right: 25%;
bottom: -1px;
left: 25%;
box-sizing: border-box;
font: bold 16px/60px Arial, sans-serif;
text-align: center;
background: #ccc;
}
I'm learning how to code Wordpress themes currently, and I'm having trouble centering my navigation menu. It moves too far to the right. I have included an image to illustrate the problem with the code that I have presented.
Here is a link to a screenshot of the problem: http://i59.tinypic.com/8z1m2o.png
body {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 14px;
color: #333;
}
a:link,
a:visited {
color: #000;
text-decoration: none;
}
p {
line-height: 14px;
}
/* General Layout */
div.container{
max-width: 960px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
article.post {
border-bottom: 1px solid #bbbbbb;
}
article.post:last-of-type{
border-bottom: none;
}
/* Header */
.site-header {
border-bottom: 2px solid #999;
padding-top: 10px;
}
/* Footer */
.site-footer {
margin-top: 0px;
border-top: 2px solid #999;
margin-left: auto;
margin-right: auto;
}
/* Navigation */
.site-nav {
position: fixed;
left:50%;
}
.site-nav ul{
background-color: rgba(255,255,255,0.8);
padding: 0px;
margin: 0px;
}
.site-nav ul li{
text-align: center;
display: inline-block;
overflow:hidden;
text-decoration: none;
margin-right: 10px;
padding-right: 10px;
border-right: 1px solid #DDD;
}
.site-nav ul li:last-of-type {
border-right: none;
}
.site-nav has position: fixed, left: 50% so the left side of the element will be positioned in the middle of the screen. Remove this rule or give the element margin-left: -X where X is equal to half of .site-nav's width if you must use fixed positioning.
.site-nav {
width: 100%
position: fixed;
margin: 0;
}
.site-nav ul{
position: relative;
background-color: rgba(255,255,255,0.8);
padding: 0px;
margin: 0px auto;
}
How can I remove the dropdown-arrows without messing up the height and at the same time hide the border when I use Bootstrap 3?
Here is a plunk where I try to do this. The hide arrow (class custom-select) is based on this blog copying this code.
Perhaps better check out the plunk, but here is the CSS:
.no-border {
border: 0;
box-shadow: none;
}
.custom-select {
background-color: #fff;
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 0 2em;
padding: 0;
position: relative;
width: 100%;
z-index: 1;
}
.custom-select:hover {
border-color: #999;
}
.custom-select:before {
color: #333;
display: block;
font-family: 'FontAwesome';
font-size: 1em;
height: 100%;
line-height: 2.5em;
padding: 0 0.625em;
position: absolute;
top: 0;
right: 0;
text-align: center;
width: 1em;
z-index: -1;
}
.custom-select select {
background-color: transparent;
border: 0 none;
box-shadow: none;
color: #333;
display: block;
font-size: 100%;
line-height: normal;
margin: 0;
padding: .5em;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.custom-select select::-ms-expand {
display: none; /* to ie 10 */
}
.custom-select select:focus {
outline: none;
}
/* little trick for custom select elements in mozilla firefox 17/06/2014 #rodrigoludgero */
/* pseudo class https://developer.mozilla.org/en-US/docs/Web/CSS/:any */
:-moz-any(.custom-select):before {
background-color: #fff; /* this is necessary for overcome the caret default browser */
pointer-events: none; /* https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events */
z-index: 1; /* this is necessary for overcome the pseudo element */
}
Edit: If I add !important to my no-border border, then it solves the border-related problem:
.no-border {
border: 0 !important;
box-shadow: none;
}
So then remains the height-change issue when toggeling custom-select for removing/adding the dropdown-arrows...
Using !important should really be used only as a last resort.
In my opinion, its the lazy way out.
In your .custom-select class, you have two things
.custom-select {
background-color: #fff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 0; /* "0 0 2em" reads as margin-top: 0; margin-left: 0; margin-right: 0; margin-bottom: 2em; (32px) */
padding: 0;
position: relative;
width: 100%;
z-index: 1;
}
Your margin was margin: 0 0 2em;, and you were giving it a border, youself. I just removed that, instead. Or you could just change it to border: 0;
Also: Semantics... But:
<select id="status" class="form-control" ng-class="{'no-border': border}" id="inputEmail3">
<option>First option</option>
<option>Another option</option>
<option>We also have a tird</option>
</select>
You have two id attributes. You should remove one.
I was using this code to create a ruler on my site:
CSS:
.ruler, .ruler li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
/* IE6-7 Fix */
.ruler, .ruler li {
*display: inline;
}
.ruler {
background: lightYellow;
box-shadow: 0 -1px 1em hsl(60, 60%, 84%) inset;
border-radius: 2px;
border: 1px solid #ccc;
color: #ccc;
margin: 0;
height: 3em;
padding-right: 1cm;
white-space: nowrap;
}
.ruler li {
padding-left: 1cm;
width: 2em;
margin: .64em -1em -.64em;
text-align: center;
position: relative;
text-shadow: 1px 1px hsl(60, 60%, 84%);
}
.ruler li:before {
content: '';
position: absolute;
border-left: 1px solid #ccc;
height: .64em;
top: -.64em;
right: 1em;
}
/* Make me pretty! */
body {
font: 12px Ubuntu, Arial, sans-serif;
margin: 20px;
}
div {
margin-top: 2em;
}
HTML:
<ul class="ruler"><li>1</li><li>2</li><li>3</li><li>4</li></ul>
It was working OK with bootstrap2:
http://jsfiddle.net/Uvt5U/4/
Now I'm migrating to bootstrap3 and the ruler is broken:
http://jsfiddle.net/Uvt5U/
How can I get it working?
Kind Regards.
This is because in Bootstrap 3 box-sizing style is set to border-box, while in Bootstrap 2 it's not.
My Firebug points me that this rule is setting this style:
*, *:before, *:after {
-moz-box-sizing: border-box;
}
bootstrap.min.css line 9
I'm not sure if the resolution of the screen can affect the CSS. My screen resolution is 1280 x 1024.
Last time, I tried my website: http://alexchen.co.nr/ in a friends's laptop and my webpage and an element (I think is #lang) moved out of place (i think it only happened in Chrome).
In my computer everything is fine (Firefox, Chrome, IE6, 7 , 8, etc.)
CSS (I'm also using Eric Meyer's CSS reset):
/* tags */
body {
background: #FFF;
color: #666;
font-family: Arial, "MS Trebuchet", sans-serif;
font-size: 75%;
}
h1 {
font-size: 28px;
}
h2 {
color: #DDD;
font-size: 18px;
padding: 0 0 10px 0;
}
h3 {
color: #666;
font-size: 10px;
font-weight: 700;
padding: 0 0 10px 0;
text-transform: uppercase;
}
p {
line-height: 160%;
}
a {
/*color: #0AE;*/
color: #08B;
list-style: none;
text-decoration: none;
}
a:hover {
color: #044;
}
/* structure */
.container {
overflow: hidden;
width: 960px;
}
/* header */
#header {
}
#header h1 {
padding: 190px 20px 5px;
overflow: hidden;
}
#header h1 a {
background: url(../images/logo.png) no-repeat scroll 0 0;
float: left;
text-indent: -9999px;
width: 216px;
height: 28px;
}
/* banner */
#lang {
float: right;
padding: 202px 0 0 0;
}
#lang li {
float: left;
}
#lang li a {
float: left;
font-size: 8px;
padding: 0 5px;
text-transform: uppercase;
}
#lang li.current a {
color: #666;
cursor: default;
border-bottom: 0px;
}
/* intro */
#banner {
overflow: hidden;
width: 960px;
}
#banner h3 a {
font-size: 28px;
}
#logo {
background-color: #222;
float: left;
overflow: hidden;
height: 169px;
width: 240px; /* ie6 hack */
height: 240px; /* ie6 hack */
}
#logo2 {
background: -moz-linear-gradient(top, #FFF, #DDD);
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#DDD));
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#FFFFFF', EndColorStr='#DDDDDD');
background-color: #DDD;
float: left;
overflow: hidden;
height: 169px;
width: 240px; /* ie6 hack */
height: 240px; /* ie6 hack */
}
#logo3 {
background: -moz-linear-gradient(top, #FFF, #DDD);
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#DDD));
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#FFFFFF', EndColorStr='#DDDDDD');
background-color: #DDD;
float: left;
overflow: hidden;
height: 169px;
width: 240px; /* ie6 hack */
height: 240px; /* ie6 hack */
}
#nav {
float: left;
padding: 200px 0 0 40px;
}
#nav li {
float: left;
}
#nav li a {
float: left;
border-left: 1px solid #08B;
font-size: 10px;
padding: 0 10px;
text-transform: uppercase;
}
#nav li.current a {
color: #888;
cursor: default;
border-bottom: 0px;
}
#tagline {
float: left;
margin: 0 40px 0 0;
width: 540px; /* 560 */
}
#tagline h3 {
font-size: 24px;
}
/* work */
#content {
color: #888;
}
.showcase {
overflow: hidden;
width: 960px; /* ie hack */
}
.first {
background: #222;
display: inline; /* ie6 hack */
float: left;
overflow: hidden;
position: relative;
width: 240px;
height: 240px;
}
.first h3, .first p {
color: #DDD;
padding: 20px;
}
.pusher {
background: #333;
display: inline; /* ie6 hack */
float: left;
overflow: hidden;
position: relative;
width: 240px;
height: 240px;
}
.blank-pusher {
background: #DDD;
display: inline; /* ie6 hack */
float: left;
overflow: hidden;
position: relative;
width: 240px;
height: 240px;
}
.pusher h3 {
color: #DDD;
padding: 120px 20px 10px;
}
.pusher p {
color: #DDD;
padding: 0 20px;
}
.nopic {
display: block;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
.pic {
display: block;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
opacity: 1;
}
.pic:hover {
opacity: 0.1;
filter: alpha(opacity = 10);
}
#fancybox-outer {
height: 100% !important;
}
#fancybox-inner {
height: 100% !important;
}
#inline1, #inline2, #inline3, #inline4, #inline5, #inline6, #inline7, #inline8 {
width: 680px;
}
#inline1 img, #inline2 img, #inline3 img, #inline4 img, #inline5 img, #inline6 img, #inline7 img, #inline8 img {
margin: 0 0 10px 0;
}
(continues...)
Normal display:
alt text http://img202.imageshack.us/img202/9638/normale.png
Abnormal display:
alt text http://img199.imageshack.us/img199/2846/notnormal.png
I think I in my friend's laptop the horizontal width, padding or margin of some elements was duplicated or something.
I made the text inside #lang a bit smaller, but not sure if the problem still there.
Is my webpage: http://alexchen.co.nr/ displaying correctly in your current screen resolution (IE, Firefox and Chrome)?
If not how do I fix it? what's causing the problem?
Too see what your site looks like for different machines, OSs, and browsers, check out http://browsershots.org/.
I just submitted a job here. Your site loads very slowly (try YSlow or Page Speed to see how you can speed it up) so some browsers will time out before it finishes and you'll see a blank screen.
Try to find out your friend's precise OS, browser type, and browser version. If he's on Chrome 4 and you're on Chrome 5, for instance, results can be different.