Is that possible to re-size the special character CSS content? Original size is too big for me, I tried using height and width but not affect.
.icon-arrow:before {
content: '\25BC';
Use font-size to achieve that, because special symbols (for example unicode) have the same behavior as any other character DEMO
.icon-arrow:before {
content: '\25BC';
font-size: 10px;
}
The previous answers are correct, but I would like to add that I prefer to use em to size characters in this way. This will size the character relative to the font-size of the parent element.
For example:
font-size:0.9em
You can use the following:
font-size: (....)px;
Related
I want to reduce the text size of the top left slider from the linked page.It is set to H2 on default and I can't figure a way to change it. The text size is too big for it and it looks stupid. I tried with the CSS below, but it only reduces the text size, unfortunately the spacing between the lines and words stays like in H2, which doesnt look appropriate either. Please help!
.fusion-flexslider.flexslider-posts .slide-excerpt h2 a {
color: #fff;
font-size: 20px !important;
line-height: 0.5 !important;
}
It's because the <a> derives font-related styling from the <h2>
Try this selector .fusion-flexslider.flexslider-posts .slide-excerpt h2, it works for me https://prnt.sc/v52pmy
If you set the a element style to include display: inline-block the element will then use the CSS styling you are giving it (though I guess you probably want to set line-height back to normal rather than try 0.5). I have tested this on your site using browser dev tools.
The reason is (to me) a quite complex one - why it doesn't work as you might expect on inline blocks. An explanation is given at https://stackoverflow.com/questions/22816123/why-cant-you-set-line-height-on-an-anchor-element-with-a-background
I have a long chunk of text which is a file path within a td that causes the whole thing to be 600+pixels wide, when I want to be fit within 200 px.
I can enable word-break:break-all and have it display the whole thing breaking between characters but then it cuts the folder names in half.
So, ideally I'd like to break the lines only upon '/' or '\' characters. Is that possible?
Thank you!
No, you can’t; there is no CSS construct for such purposes at present.
What you can do to suggest allowed line break points is to use a <wbr> tag or a zero-width space after each “/” or “\”. You could do this dynamically with JavaScript, traversing the relevant text nodes.
I don't think you can do this with CSS alone. But here is a way to do it using JQuery:
function (yourObject) {
yourObject.html(yourObject.html()
.replace(///g, '<br>')
.replace(/\/g, '<br>'));
}
This is assuming that your object doesn't contain html within it. If it does, it would replace the slashes, so you would need to check for a > following the slash.
A better solution might be to wrap the long text in a container element that allows scrolling, like StackOverflow does with code blocks:
.longtext {
width: 100%;
display: block;
word-break: none;
overflow: auto;
background: #eee;
}
http://jsfiddle.net/mblase75/NCNSa/
I know that em will set the font-size relative to the parent. What if I wanted to set the font-size relative to the overridden value of a given element?
For instance:
h1 {
font-size: 20px;
}
.smaller h1 {
font-size: (80 percent of the standard h1);
}
Is this possible?
I should mention that I'm using less which might provide some more flexibility.
Not sure about EMs, I suppose you could try it and see what happens.
If you wanted to utilize less's variables, you could do something like this:
#h1-font-size: 20px;
h1 {
font-size: #h1-font-size;
}
.smaller h1 {
font-size: #h1-font-size * .8;
}
You cannot. There is no way to make anything relative to the “overridden value”. You should design your styling in a different way.
And it would be rather odd to set heading size as a fixed amount of pixels for some headings and as relative to an “overriden value”, which is generally unknown and should be expected to be browser-dependent.
But to the extent that you expect browsers to have common defaults, you can pretty much use the HTML5 “expected rendering” rules, since they reflect usual browser practice rather well. According to them, h1 has font-size: 2.00em, so if you wish to set some size to 80% of that, just use 1.6em.
I would like to display a number of underscores to the user to let them know how many characters they need to fill in to satisfy the length requirement.
My problem is: underscores aren't separated by spaces.
Q: What font or css style should I use so that my underscores can be easily counted?
You can just use letter-spacing: 0.4em; to separate out the various characters in the element. I'm assuming you're using an input element, so:
input {
letter-spacing: 0.4em; /* or whatever measurement you prefer... */
}
JS Fiddle demo.
References:
letter-spacing at the MDC.
Use the CSS property letter-spacing.
Visual example: http://jsfiddle.net/8w9WY/
I would also like to reset the font-size of <small> tag too normal HTML elements.
Like I want the content in small tag to be 13px of what other tags are.
How do I do this ?
I think a better way is to do
small {
font-size:inherit;
}
This way, the small tag will be the same size as whatever element it's contained in, so if for some reason you have:
<h1>This is some <small>small</small> text</h1>
The word "small" would be the same size as its surrounding words.
The one caveat with this is that I'm not sure if it will work in IE. I suspect that it will, but you'd have to try it to be sure.
You might want to look into using a CSS reset that takes care of this and similar issues for all tags.
First, it's hard to tell what you're asking. Here's how to set the font-size of those tags to 13px.
small {
font-size: 13px; /* you can use !important, but I wouldn't recommend it */
}
Second, 13px is not a very small size, unless the rest of your text is enormous. That fact, together with your phrasing ("I want the content in small tag to be 13px of what other tags are") leads me to suspect that what you really mean is you want the <small> text to be a percentage of the rest of the text. You can do this as follows:
small {
font-size: 13%;
}
However, this seems rather small. If you really want a percentage, I'd suggest something between 60% and 80%.
If you want to make it 13px exactly, Keltex's answer will do it for you.
If you want to reduce the size by 13 pixels from the base font-size of its parent, you have the following options as there is no "make it exactly 13 pixels less" operator available:
If you know the base font-size, hardcode a value that is your 13 pixels less in your selector.
Rely on percentages or ems to size it down appropriately. For instance, instead of "13 pixels less" think of it as being a given percentage of the base font-size. i.e.
p{ font-size: 24px; }
small{ font-size: 45% /* Will make it approximately 13 pixels smaller */ }
Your question is hard to understand. Do you want to make text in small tags the same size as the rest of the text? I'll assume that.
small {
font-size: 100%;
}
This will make the small tag have the same font-size as the rest of the text.
Why you would want such a thing is beyond my comprehension, but you have your answer.
[edit] this has the same effect as #notJim's answer - if the parent's font-size changes, this one adapts accordingly and adopts that new size.
Add this to your CSS:
small
{
font-size: 13px !important;
}