I add a blog sign up form to the sidebar of our blog page and styled it with CSS. It looks fine on desktop view, but when you open the page on a mobile phone then the button overlaps the bottom of the page;
https://screentimelabs.com/parenting-hacks/
enter image description here
Here's the code that I added to the style sheet;
.sidebar-widget #mc_embed_signup{
width: 278px;
height: 211px;
background: url(https://screentimelabs.com/wp-content/uploads/2015/10/bg_logo.png);
border: solid 1px silver;
box-shadow: 0px 3px 5px 1px silver;
}
.sidebar-widget #mc_embed_signup h2{
color: #ffffff;
font-family: "Sans Pro Regular", sans-serif;
font-size: 26px;
margin: 4px 0;
}
.sidebar-widget #mc_embed_signup .mc-field-group{
font-family: "Sans Pro Regular", sans-serif;
color: #ffffff;
}
.sidebar-widget #mc_embed_signup .mc-field-group{
font-family: "Sans Pro Regular", sans-serif;
color: #ffffff;
}
.sidebar-widget #mc_embed_signup input.button{
color: #FFFFFF;
border: 2px solid #FFFFFF;
background-color: #ffc23b;
text-transform: uppercase;
margin
}
Any help would be hugely appreciated, spent hours on this now.
You have to change this class like this,
.sidebar-widget #mc_embed_signup {
width: 278px;
height: auto;
background: url(https://screentimelabs.com/wp-content/uploads/2015/10/bg_logo.png) no-repeat;
background-size: cover;
border: solid 1px silver;
box-shadow: 0px 3px 5px 1px silver;
}
Related
I had a email textbox with default,success,error css class.
<input id="emailInput" class="sansserif inputuser" style=" margin-top: 5px;" type="text" placeholder="Enter Email.."/>
.default{
width: 306px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
color: #737373;
font-weight: 600;
background-color: white;
background-image: url('../Styles/Icons/User Male-35.png');
background-position: 5px 5px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
.error{
width: 306px;
box-sizing: border-box;
border: 2px solid #ff0000;
border-radius: 4px;
font-size: 16px;
color: #737373;
font-weight: 600;
background-color: white;
background-image: url('../Styles/Icons/User Male-35.png');
background-position: 5px 5px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
.success{
width: 306px;
box-sizing: border-box;
border: 2px solid #00b33c;
border-radius: 4px;
font-size: 16px;
color: #737373;
font-weight: 600;
background-color: white;
background-image: url('../Styles/Icons/User Male-35.png');
background-position: 5px 5px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
here i'm applying following css classes default ,error and success while validating email text box but only difference from the above three classes is border property only .how to reduce the redundant css properties is there any better way to achieve this.
You can define similar css at one place with joining multiple selectors and overriding later if necessary:
Note: The styles that you are overriding i.e for .error and .success must come after the generic styles otherwise they will be overridden by default styles and you won't see any change.
.default,
.error,
.success {
width: 306px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
color: #737373;
font-weight: 600;
background-color: white;
background-image: url('../Styles/Icons/User Male-35.png');
background-position: 5px 5px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}
.error {
border-color: #ff0000;
}
.success {
border-color: #00b33c;
}
I'm struggling to add a transparent background to my button.
I know it's quite simple but I'm not sure what I'm doing wrong for it not to take effect.
The Html code I've written:
<div class="footer-text-cta">
<p>Want to know what equipment I use when I go kayaking?<button class="green-button">I want to know!</button></p>
</div>
My CSS code:
button.green-button{
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 7px 20px !important;
border-radius: 5px;
margin: 0px 0px 0px 20px;
background-color: #1ec279;
border: 3px solid #1ec279;
border-radius: 5px;
}
button.green-button a {
text-decoration: none;
color: #fff;
}
button.green-button a:hover{
background-color: transparent;
color: #1ec279;
}
I've added an image of what I'm trying to get the button to look like below.
Here you go with a nice transition XD
button.green-button{
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 7px 20px !important;
border-radius: 5px;
margin: 0px 0px 0px 20px;
background-color: #1ec279;
border: 3px solid #1ec279;
border-radius: 5px;
transition: 0.8s;
}
button.green-button a {
text-decoration: none;
color: #fff;
}
button.green-button:hover{
background-color: rgba(255,255,255,0);
cursor: pointer;
}
button.green-button:hover a{
color: #1ec279;
}
<div class="footer-text-cta">
<p>Want to know what equipment I use when I go kayaking?<button class="green-button">I want to know!</button></p>
</div>
The only trick to a button like this is that there is a border. I'm going to assume that on :hover you want the background to appear, as this seems to be the most common usage for these ghost or outline button styles.
That being the case your code might look something like this:
.button-example {
padding: 15px;
background: #000;
}
.button {
display: inline-block;
padding: 10px 15px;
font-family: Helvetica, Arial, sans-serif;
border: 3px solid #aaa;
border-radius: 6px;
cursor: pointer;
}
.button-green {
background: #1ec279;
border-color: #1ec279;
color: #fff;
}
.button-green.button-outline {
background: none;
}
.button-green:hover {
background: #19a969;
border-color: #19a969;
}
<div class="button-example">
<button class="button button-green">
I am a green button
</button>
<button class="button button-green button-outline">
I am a green outline button
</button>
<button class="button">
I am a sad, colorless button
</button>
</div>
Got a problem with aligning a div and an input next to each other to create that classic input with icon. However, when I use Safari/Mac and Safari/iOS, it appears like this:
Broken in Safari
... and I just can't get my head around it! It's fine on Chrome and I've tried playing around with the floats, vertical align (don't know how relevant this is), but still nothing.
HTML:
<div class="input-with-icon">
<div class="icon">X</div>
<div class="input"><input type="text" placeholder="Start typing to find a customer..."></div>
</div>
CSS:
.input-with-icon .icon {
float: left;
background-color: #fff;
border-top: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
border-left: 1px solid #dcdcdc;
padding: 13px 0 14px 10px;
color: grey;
font-size: 14px;
border-radius: 5px 0 0 5px;
}
.input-with-icon .input {
overflow: hidden;
}
.input-with-icon input[type="text"]{
-webkit-appearance: none;
width: 100%;
outline: none;
font-size: 16px;
padding: 13px;
font-family: 'Roboto Light', sans-serif;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
border-left: 0;
border-radius: 0 5px 5px 0;
}
Here's a fiddle if this helps you guys with my code - for some reason the right border doesn't want to work on the fiddle but not fussed about that bit as it's fine everywhere else.
https://jsfiddle.net/r08gxre3/1/
Any help would be much appreciated, thanks guys! :)
Just add margin: 0px; to your input element. It should be that!
Like:
.input-with-icon input[type="text"]{
-webkit-appearance: none;
width: 100%;
outline: none;
font-size: 16px;
padding: 13px;
font-family: 'Roboto Light', sans-serif;
border-top: 1px solid #dcdcdc;
border-right: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
border-left: 0;
border-radius: 0 5px 5px 0;
margin: 0px;
/* or just margin-top: 0px; */
}
Fiddle: https://jsfiddle.net/bbdkzuyn/
I want to create a set of 3 circle buttons vertically aligned (see reference: http://i.imgbox.com/hAjYNmIq.jpg) but I can't get it done for some reason, the first button seems to cover the rest. I know this is a basic code thing but I'm stuck and I need to get this solved asap.
Here's a basic code for what I've got so far:
#pagination a {
color: {color:Link Shadow};
font: 700 1.000em 'Helvetica', Calibri, Helvetica, Arial!important;
position: fixed;
float:left;
z-index: 999!important;
bottom: 28px;
display: none;
background-color: #fff;
border:3px solid {color:Link Shadow};
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .15);
width: 26px;
padding: 13px;
height: 26px;
border-radius:100%;
margin-left: -245px; }
<div id="pagination"> Back To Top<br> Prev Page<br> Next Page </div>
After updating your HTML (incorrect href's), here's what I've come up with. Your text will be overflowing because of your size constraints, though.
And here's a Fiddle of it
<div id="pagination">
Back To Top
Prev Page
Next Page
</div>
#pagination a {
color: #000;
font: 700 1.000em 'Helvetica', Calibri, Helvetica, Arial!important;
z-index: 999!important;
background-color: #fff;
border:3px solid #00a;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .15);
width: 26px;
padding: 13px;
height: 26px;
border-radius:100%;
display:block;
margin-bottom:20px;
}
#pagination {
position:fixed;
}
I want to show a p tag or legend tag or any html text like button. But how is it possible? I have tried with css but not working well.
I want to show it like button.
<p class="button" >Submit</p>
or
<a class="button" >Submit</a>
or
<legend class="button" >Submit</legend>
Now need the button class.
Just apply css styles and cursor: pointer; to it to make it appear that it's a button
.button{
display: inline-block;
background: #000;
border-radius: 4px;
font-family: "arial-black";
font-size: 14px;
color: #FFF;
padding: 8px 12px;
cursor: pointer;
}
JSFIDDLE
It is simple with css.
<p class='btn'> Button 1 </p>
And Your CSS
.btn{
float:left;
width:auto;
height:30px;
display:block;
border:1px solid #ff6600;
background:#00ff00;
color:#000;
line-height:30px;
text-align:center;
padding:0 20px;
border-radius:3px;
}
.btn:hover{
cursor:pointer;
}
jsfiddle : http://jsfiddle.net/ob67xnw4/1/
Try This.
Here is the Working FIDDLE
CSS
.button {
width: 75px;
background: #d2d2d2;
text-align: center;
float: left;
color: #000;
line-height: 32px;
text-decoration: none;
}
.button: hover{
width: 75px;
background: #0e567f;
color: #fff;
text-align: center;
float: left;
line-height: 32px;
text-decoration: none;
}
<p class='button'> Submit </p>
.button{
background: -webkit-linear-gradient(top, #CCB5B6 20%, #274936 70%);
width: 100px;
height: 40px;
font-family: sans-serif;
font-size: 25px;
text-align: center;
line-height: 40px;
color: #96F256;
border-radius: 10px;
box-shadow: 0 2px 5px 3px black;
cursor: pointer;
}
.button:hover{
color: white;
}
OUTPUT
I think you should use this code and it is working well. You can change Color according to you.
Live Demo
HTML Code:
<input class="round-button-circle" type="submit" value="Submit"/>
CSS Code:
.round-button-circle {
width: 150px;
height:50px;
border-radius: 10px;
border:2px solid #cfdcec;
overflow:hidden;
font-weight: 15px;
background: #4679BD;
box-shadow: 0 0 3px gold;
}
.round-button-circle:hover {
background:#30588e;
}
Result:
Had just got what did I want.
DEMO JSFIDDLE
.button {
display: inline-block;
outline: none;
cursor: pointer;
border: solid 1px #da7c0c;
background: #478dad;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .3em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.button:active {
position: relative;
top: 1px;
}