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
Related
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;
}
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 created and off canvas navigation which works great in desktop, but on mobile devices when the menu slides open there is white space added to the bottom of the page.
An example can be found here.
Thanks for your help! :)
you can eliminate that white space by simply adding margin: -40px; or something like that to the .fcFooter class.
.fcFooter {
font-family: 'ff-tisa-web-pro',serif;
font-style: italic;
letter-spacing: .1rem;
font-weight: bold;
color: #8a8b8c;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
/* margin-top: 40px; This line would be replaced by the following */
margin-top: -40px;
border: 1px #ededed;
border-style: solid none none none;
display: block;
}
You can add that css only to mobile devices by a media query like this:
#media only screen and (max-width: 600px) {
.fcFooter {
margin-top: -40px;
}
}
Please let me know if this was useful
The height and width of the canvas must be declared in the height and width attributes, if you want it work correctly
Wrong:
<canvas style="height: x; width: y;">
Correct:
<canvas height="x" width="y">
I have a website with text that I've set to #666666 in CSS. This color persists just fine across browsers- however, when I view the site on a Windows machine, the text appears a much lighter shade of gray, despite my using the same browsers (Firefox and Chrome). This problem only occurs within the content elements- the nav bar is also set to #666666 and it behaves as desired.
The CSS for the nav bar:
a.nav {
color: #666666;
font-size: 48px;
font-family: 'Raleway';
text-align: center;
text-decoration: none;
margin-top: -50px;
}
The CSS for my content (this is the stuff that changes color):
#content {
color: #666666;
font-size: 18px;
font-family: 'Raleway';
width: 470px;
margin: 0 auto;
margin-top: 15px;
line-height: 128%;
text-align: justify;
}
Any ideas about why this might be happening and what I can do to remedy it?
may be rgb color as it may be more consistent applied on different elements.
color: rgb(102,102,102);
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;
}