Letter spacing given -0.02rem by design, that's why space between caret and letter is too small in input. Is there any way to solve this problem without changing letter-spacing in css?
enter image description here
input, textarea {
width: 100%;
font-size: 14px;
font-weight: 600;
color: var(--text);
padding: 10px 12px;
caret-color: #00a2ed;
letter-spacing: -0.02rem;
border: 2px solid var(--text);
background-color: var(--articleBg);
}
Related
I just started to learn html and css again and I am struggling with some weird stuff that I didn't see before.
I have this button
.btn {
display: inline-block;
font-size: 1em;
background: #fff;
padding: 30px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
transition: 0.2s;
}
Explore
this all good but if you pay attention there is some margin or just some space at the bottom
inside the blue square I just want to be the text height so it will be centered perfectly
I check your codes in my editor and it is correct perfectly. Your codes' problem is due to over-code or other ones.
This image is from my Chrome browser:
This is the CSS code that I already have in place for the button. I want to increase the size of the icon inside of this button. How? (adding css to the wordpress pagesite). Thank you
.nectar-button.fixed-size-energy {
border: 2px solid #fff;
width: 290px;
height: 70px;
font-size: 22px;
font-weight: bold;
line-height: 25px;
text-align: center;
text-shadow: 1px 1px 1px black,
2px 2px 1px black;
}
If your icon is inside of your button, you can create CSS rule that only targets that icon, inside of the button:
.nectar-button i{
font-size: 30px;
}
A very simple problem,
I want all my button to take 90 % of the width of my columns in ionic 2, and not be dependent of the text inside
.button-pink {
color: #F63566;
background-color: white;
text-transform: uppercase;
font-size: 75%;
border: 2px solid #F63566;
padding: 6% 23%;
margin: auto;
white-space: nowrap;
text-align: center;
font-family: "SanFranciscoText-Regular";
font-weight: bold;
letter-spacing: 0.3em;
}
here is my button css, i can't manage to make them fit the width of the column, and not be dependent of the text (if i change the text inside my button, the size is changing, and i don't want that)
Thank you in advance and good day to everyone !
You need to set the width of the button in your CSS.
.button-pink {
width: 90%;
}
I created a donate button and copied the exact code as provided, yet it is visually HUGE on my website. http://naomihattaway.com/about/mias-mission/
How do I get it down to a normal size?
In CSS i find this code when inspecting your donation button/image.
media="all"
input, select, textarea {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
color: #333;
font-family: 'Roboto Slab', serif;
font-size: 16px;
font-size: 1.6rem;
font-weight: 300;
padding: 10px;
padding: 1rem;
width: 100%;
}
By removing the "width:100%" the Button/image was normal sized then. Try this out and tell me if it helps.
Regards, Mike
Some times I may may want an anchor beside a submit button, but I always seem to have problems lining them up ...
a, input[type=submit], input[type=button], button {
font-family: arial;
background: #fff;
color: #777;
border: 1px solid #ccc;
font-size: 12px;
line-height: 20px !important;
padding: 5px 10px;
margin: 0;
}
http://jsfiddle.net/cXgzM/
with that, anchors are still 2 pixels short
Simply add this to your CSS:
a
{
display: inline-block;
}
I updated your example. Note that this property doesn't work in IE7 and lower. :)