I want certain words to be highlighted with a background color on headings. So I am using in my headings like
<h2 class="sppb-title-heading">Ihre <span>Vorteile</span> bei uns</h2>
In CSS I have added:
h2.sppb-title-heading span{
background: #edbd4f;
color: #4e7cb7 !important;
padding: 0 5px !important;
line-height: 100% !important;
}
On mobile devices I have the problem, that the text is not centered. I have less background visible to the top. When I check the site with any browser from normal desktop its looking fine but at the point I am viewing the page with mobile devices its wrong.
Here is how it look like:
Problem
Here is the link to page
Can somebody help me out with this?
kweb
A quick fix would be to adjust the padding.
h2.sppb-title-heading span{
background: #edbd4f;
color: #4e7cb7 !important;
padding: 5px 5px 0 !important;
line-height: 100% !important;
}
And on the number counters:
#counter .sppb-animated-number{
font-family: 'LithosPro-Regular';
font-size: 65px;
color: #fff;
line-height: 100% !important;
padding: 10px 5px 0;
}
Related
The following is my CSS code for a form's submit button:
.submit {
-webkit-appearance: none !important;
text-align: center !important;
border-radius: 0rem;
color: rgb(63, 42, 86);
display: inline-block;
float: right;
border: none;
font-size: 14px;
border-left: 0.05rem solid rgb(63, 42, 86);
width: 3.6rem;
height: 2.2rem;
line-height: 1.75rem;
transition: background-color 0.2s;
background-color: transparent;
}
After some initial formatting issues on iOS, I implemented -webkit-appearance: none which fixed most of the problems. But the "Submit" text for the Submit button is now right-aligned instead of centered on iOS, as shown in this image: http://ben-werner.com/screenshot/01.png
On the desktop version using chrome and safari however, the text displays centered as it should: http://ben-werner.com/screenshot/02.png
I don't think it is a specificity issue, as the !important declaration of text-align: center should prevent anything else in my CSS overriding it.
Does anyone have an idea what is happening on the iOS device that causes the Submit text to function differently? Any help is much appreciated, thanks!
CodePen Link: https://codepen.io/benwerner01/pen/BqErOE (Note: the html formats correctly on the CodePen site, but the same code running within safari or chrome on iOS breaks the button. I have hosted the code from CodePen at https://ben-werner.com , to demonstrate that on mobile it displays incorrectly)
Ok, I know what is happening now. You are giving your submit button a specific width and height that is affecting the text-align on iOS devices. Removed the width and height values and your text will align center on iOS devices. I would also use padding to give your button the desired width and height instead of those properties.
.submit#mc-embedded-subscribe {
border-radius: 0 !important;
-webkit-appearance: none !important;
color: rgb(63, 42, 86);
float: right;
border: none;
font-size: 14px;
border-left: 0.05rem solid rgb(63, 42, 86);
/* width: 3.6rem;
height: 2.2rem; */
text-align: center !important;
text-align: -moz-center !important;
text-align: -webkit-center !important;
line-height: 1.75rem;
transition: background-color 0.2s;
background-color: transparent;
margin: 0 auto;
}
I have a web app with a text input element:
#sendmsg {
background: none;
border: 1px solid rgb(211, 211, 211);
border-radius: 10px 10px 10px 10px;
outline: 0;
padding: 3px 20px 3px 5px;
margin: 0 10px 0 0px;
text-align: left;
font: normal normal 400 normal 14px "Source Sans Pro", sans-serif;
color: #747373;
height: 1.8em;
width: 87%;
background: #FEFEFE;
}
<input type="text" id="sendmsg" name="chatmsg">
On iOS safari the input is displayed this way:
What can I do to resolve the misplaced cursor issue?
This appears to be a bug with Safari on iOS itself. Found some references to similar behavior: https://bugs.webkit.org/show_bug.cgi?id=138201
It seems to be a symptom of having an input box inside of a container with overflow set to scroll. I was able to replicate the bug with just a very basic div with overflow: scroll, and an input in the middle of it and have not been able to find any clean css ways to fix it.
The two ways that would work to remove this bug are to remove the use of overflow scrolling on the main body of the page and either 1) have the header be sticky some other way, 2) let the header scroll along with the page on iOS. Are these options something we would want to do?
It works in Chrome desktop
But not Safari iOS
Here is the the CSS
.button {
border: 1px outset $color3;
background: $color1;
color: $color4;
font-size: 80%; // A little smaller because it's in uppercase
text-transform: uppercase;
display: inline;
margin-left: 5px;
margin-right: 5px;
}
I tried font-size: smaller, 0.8em, etc, but it did not help. 50% or 0.5em looks good on iPhone, but is too small on the desktop. text-transform did not matter. padding: 1px; did not help.
Change display to inline-block, and add padding to the top
I was trying to make a simple help button using "A" anchor tag. The thing is it works perfectly on Firefox, Chrome, OP, Safari. Now when I tried it on Internet Explorer 10, The text wasn't properly aligned in the middle. here is what I've done so far:
HTML
<a id="help-btn"><span>?</span></a>
CSS
#help-btn {
display: table;
margin-left: auto;
margin-right: auto;
border: solid 5px #2F2F2F;
width: 10em;
height: 10em;
text-align:center;
background: #c100ff;
text-decoration: none;
vertical-align: middle;
}
#help-btn span {
color: #22002D;
font: 10em "bauhaus 93";
text-shadow: 0px 0px 5px #fff;
line-height: 100%;
}
here is a jsfiddle sample. any help would be appreciated...
so I've finally found the solution after 3 hours of digging deep, as stupid as may it sounds but the extra space was being added by the font "bauhaus 93". It renders correctly on all browsers except IE (that's a shocker). So I had to change it to another font and now it works perfectly. so if anyone face the same problem please do check the font that you are using.
play with your line-height.
Try this :
#help-btn span {
color: #22002D;
font: 10em "bauhaus 93";
text-shadow: 0px 0px 5px #fff;
line-height: 10em; // CHANGE YOUR LINE-HEIGHT SIZE
}
if the problem not fixed, try add display:block; to your #help-btn span
You need to add the line-height attribute and that attribute must match the height of the div. In your case:
Try
#help-btn span {
color: #22002D;
font: 3em "bauhaus 93";
text-shadow: 0px 0px 5px #fff;
height: 3em;
line-height: 3em;
}
I am using some css styling for my submit buttons, and they look fine except in Firefox there is a space between the left and main image. Here is what I'm using:
button.buttons {
background: none;
background-image: url(images/button_left_sprite.png);
display: block;
border: none;
margin: 0 10px 10px 0;
padding: 0 0 0 17px;
cursor: pointer;
font-weight:normal!important;
color: #111111;
}
button:hover.buttons {border: none; }
button.buttons span {
background-image: url(images/button_sprite.png);
padding: 9px 20px 10px 5px;
font: 12px 'Droid Sans',arial,sans-serif;
}
/* Green Button */
button.btn_green {background-position: 0 569px;color: #435425;}
button.btn_green:hover {color: #435425!important;}
button.btn_green span { background-position: 100% 569px;}
button:hover.btn_green { background-position: 0 528px;background-color:transparent!important; }
button:hover.btn_green span { background-position: 100% 528px;background-color:transparent!important; }
And to put it on the page:
<button type="submit" class="buttons btn_green left"><span class="left">Update</span></button>
If it helps, the images are here:
Im going bonkers trying to get this ugly space to go away in Firefox! Can anyone help me figure out why it's doing this?
Firefox has some abnormalities when it comes to button/input padding. I'm not sure why it is the case, and why the issue remains despite being publicly documented. Anyway, check out something like normalize.css and check out the section on forms - for instance, this is one fix they apply for firefox:
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
Being that your left sprite depends on 17px of left padding on .buttons, if FF adds a couple pixels by default, that could mess with your images aligning. Another thing you could try is reducing the amount of left padding and see if the images line up.
Does that help?
Is it only for me that the button looks totally messed up in firefox? not just a space between the images.
Looks better for me like that:
http://jsfiddle.net/78eSc/1/
button.buttons {
background: none;
background-image: url('http://i41.tinypic.com/dv1b6.png');
display: block;
border: none;
margin: 0 10px 10px 0;
padding: 0 0 0 14px;
cursor: pointer;
font-weight:normal!important;
color: #111111;
}
button.buttons span {
display:block;
background-image: url('http://i41.tinypic.com/2mcds8j.png');
padding: 9px 20px 10px 5px;
margin:-1px 0 0 0;
font: 12px 'Droid Sans',arial,sans-serif;
}
1st thing.. why are you using so big images?
http://i41.tinypic.com/2mcds8j.png
simplified...
http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-repeat&preval=repeat-x
or better try to do it all, with out images,
http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-radius
example how to do it ;)
http://www.css3.info/preview/rounded-border/