Hopefully this is possible to do in just CSS and not javascript+css.
What I am trying to achieve is say I have a container which has a fixed width of 100px. It cannot be smaller nor larger than 100px. I have text in this container that I want to always be on one line (nowrap) and if the text is too long it will scale the font to fit the container.
Is this possible? I tried setting the width and setting font-size: 100% with whitespace:nowrap. It doesn't quite work tho. The font scales but not enough to stay in the box. Using overflow:hidden wont work because it will cut the text off which I do not want.
I know this is 4 years late,(This is for people searching this problem later on, as this was my number one hit on google) but I was able to do a small work around with {font-size: _vw}. I am not sure if this was back then. but for me personally, I set the vw of my text (with a little trial and error) to find the size I needed and stuck with it. It scales perfectly now. I guess you can come into issues with REALLY big screens and possibly mobile if the text becomes TOO small. But with just that one line of CSS it worked completely for me.
No it is not actually possible to scale a font size according to available space calculated on 'container width and how many characters are in container' with only .css
Related
I would like to find out how to present a banner or logo on a responsive design but I can't find a question that is not flagged as bad or likely to be closed. I've tried numerous ways of phrasing the question and none of them are liked. So, I have no idea how to even present this question or even where to begin to look for the answer or how to ask the question. PLEASE, PLEASE give me an idea of how to word this so someone will see my question. I've tried web searches but nothing addresses the issue and I cannot even figure out how to work it.
In case someone sees this, what I am doing is taking a site that was not responsive and had a banner that was 1100 px wide by 110px in height. The trend seems to be to move away from such banners and use logos that are square or round instead or to use text for branding. If I just reduced the size of the banner to 500px wide then the height would proportionally decrease to only 40 or 50px if a percent value was used. That clearly won't look good on a small screen.
Also, if I reduced the image to a more square dimension the image isn't actually resizing by percent values when the CSS background-image style is used instead of an img tag surrounded by div tags. I haven't found a way to control alignment and size using percent values on the background-image property of a container. I could tell my client that we shouldn't use a wide banner in a responsive design but I don't know if that means I am missing an option.
A different image seems to be required on smaller displays using media queries. Can alignment and resizing as percent values be used with the background image CSS style or should different images be served using the img tag?
Lastly, on a high pixel density display tablet or even smartphone serve a large image due to the number of pixels wide being greater than 900px or 1000px? With high-density displays, it seems that even a smartphone could have a width greater than 1000px but that may not look right.
this will size it:
.img-class {
background-image: url('path/myImage.png');
background-size: 200px 200px;
}
first value is width, second value is height, you can also use %, or to scale the whole thing use a single value like for example: background-size: 80%;
A different image seems to be required on smaller displays using media
queries. Can alignment and resizing as percent values be used with the
background image CSS style or should different images be served using
the img tag?
Yes as long as you scale it down and not up, or it blurs out.
Lastly, on a high pixel density display tablet or even smartphone
serve a large image due to the number of pixels wide being greater
than 900px or 1000px? With high-density displays, it seems that even a
smartphone could have a width greater than 1000px but that may not
look right.
Just be sure your images are 'retina ready' and that's all, meaning if you want to place on your website a 200x200 px image, create it 400x400 px instead, then using css you force it to always be 200x200, so it will read a 400x400 and resize it to 200x200 making it not blurred on mobile.
Side note: If you have graphic images and not photographs, i recommend you using svg (vector images) now supported on all browsers, that are scalable so retina ready by default let's say, and way smaller in size.
I'm having this problem: I did not set any width on my root element, I deleted everything I had from my HTML elements, yet it still sets root's width to 980px even though you can clearly see on the screenshot that it's not the real width. What is more if i resize it a little, it still says its 980px... And so it goes on every size up to 980px width.
I tried setting its width to calc(100vw) - without success, only setting it with pixels actually changes it, but that's not what I want obviously. It bothers me a lot because my mixins on min-screen won't work properly because of that.
Am I really doing something wrong here? I don't understand... Any help/explaination would be nice.
You'd doing it right.
Don't trust Chrome's responsive design mode. I is giving you the #2x dimensions.
After a 30 minutes searching in Stack Overflow i could not find a solution to my problem, so here is it:
I have a static blog, and it's almost 99% responsive. The problem comes with a larger titles with wider words (like "documentfragments", in my case), they make a horizontal scrollbar in screens with a width below 400px.
Here the example:
As you can see, the width is (in that specific case), 320px and the header breaks the layout.
Im not a specialist in stylesheets, i'm learning but whatever i do (adjust the width, font size, etc) i cant give a solution to the problem.
Any idea?
You have a few options here.
1. Make the font-size smaller.
You could reduce the font-size to something that is not likely to result in overflowing text.
2. Hyphen-Wrap your words
Using CSS you can set your element to hyphenate your words so they wrap when they run out of space. Just add word-wrap: break-word to the element in your css.
3. Use Javascript
You could write some javascript that calculates the width that it needs to fit into, then alter the font-size appropriately.
I'm working on a website and i'm trying to make it responsive.
The problem I have is that the text will not dynamicly adjust to the content size.
maybe you guys can help me?
thanks in advance!
Their are a couple ways you can change it, first of all you can use media queries in your css, which says that when your screen is a certain size the font-size will increase or decrease. I prefer to make the div bigger instead though. A bigger or smaller font size is only usefull when you want a smaller title for certain devices.
With the div width just give the div a width in % (100% for example) and make the height auto, now the div will auto size when you make it smaller but all of the text is still visible for everyone. If u want an example you could take a look at my personal website and make the homepage bigger and smaller, its not perfect but its working (www.svbennekom.nl)
Is there some kind of a trick to make font size take up the same amount of width regardless of which browser is used? (I use pixels for font size, but I'm not sure how relevant that is to this question.)
Normally, if I have a line of text on my site that I want to only take up one line and not drop down to a second, I have to make sure the text that I write is short enough to fit as one line within the allotted space in all the main browsers. For instance, I might write some text within a div (that also has a specified width in pixels) that comes out as one line on firefox, safari, etc., but then when I go to check ie8, for some reason with the way it is displayed, it didn't have room for that last word and dropped that word down to the beginning of a second line. I was wondering if there was some way to make the text take up the same amount of room in terms of width no matter what. Is there some kind of simple solution here that I'm missing?
As I had said, I use pixels for font size, and I've been researching using other units of measurement, but to my understanding so far, using something else such as em's for font-size wouldn't really be the answer to this since they are basically an abstraction of pixels. Even if there was a way to do it with a different unit of measurement, I'd be interested to know if there is a a solution to this that would allow me to keep pixels, since that is just my preferred unit of measurement.
Different browsers and OSs have slightly different font handling, so it is really difficult to accurately anticipate these sorts of things. What I do is write a little jQuery function that increases the size of the font in a container until just before it wraps, fitting the container and not wrapping as a result. It generally flickers on load in IE but it is not noticeable on normal browsers. You can see it in action in the links attached (check out name of the market):
http://www.hdradioalliance.com/station_guides/widget.php?id=77
http://www.hdradioalliance.com/station_guides/widget.php?id=21
http://www.hdradioalliance.com/station_guides/widget.php?id=61
Feel free to recycle the code if it fits your needs.
Edit: actually, that particular bit of code shrinks the font until its container is one line tall—rather than what I said, which is the other way around. I've done it both ways tho. Here it is:
$(document).ready(function(){
var headingSize = 1;
while($('#headingSling h1 span').height() > 34 && parseInt($('#headingSling h1 span').css('font-size').replace(/\D\./g,'')) > 10){
headingSize -= 0.01;
$('#headingSling h1 span').css('font-size', headingSize+'em');
}
});