CODEWITHSUNDEEP
htmlcss
Awais Umar
Awais Umar

Reputation: 2085

CSS - font size 100% of the containing div (element)

Ok. Here is the thing.
Like we can use width:100% of an element and it'll take the full width of its container. How can we do that in case of fonts? I have tried using 100% or em etc but that's not working.

Let me explain the actual problem. Here are three versions of a div. Please see the images.

1- Desktop

enter image description here

2- Android enter image description here

3- iPhone enter image description here

You can see that the text "Quote and Buy Online" is in the same line for Desktop and Android (which is the requirement) while it is in two lines in iPhone. Whereas the font-size is the same for all three. Now, that's the problem.

One way is that I reduce the size of the font until the problem gets solved for iPhone but it would then be much smaller for Desktop and Android. If somehow, I tell the font to adjust its size according to its containing div then the problem will be solved.

Please note that I have checked the solution here but It says it won't be dynamic. So looking for a better alternative.

Here is the link where you can find the form.

Upvotes: 2

Views: 6260

Answers (2)

Tony Barnes
Tony Barnes

Reputation: 2643

This is not possible with pure CSS. You have 4 options:

1) Define the font size for certain breakpoints, to fill up as much as the container as possible, cross browser/platform.

2) Use Viewport Percentage Units: vw as described in this SO answer

3) Use a JS library to fill the text of the parent container, eg:

4) Apply a font size that fits the container well, maybe tweak it after 600px +; and live with the fact the font won't fit exactly 100% of the container.

I recommend no.4 for your specific requirment - there will be no JS dependancy, it's simplest to apply and it won't make that much of a difference for your requirement. Maybe the form would look better if you align the text to the left as well. I think no1 and 2 are a bit of an overkill.

Upvotes: 2

Leigh B
Leigh B

Reputation: 96

You may want to look at using media queries to hit this across the device spectrum. One for iPhone portrait is below, but you will likely have a few to align for all devices. 

@media screen and (max-width: 320px) {
.selector { font-size: 10px; }
}

.selector = your class or id of the button or any other html selector or tag.

I personally would go with a screen based fixed figure as you know it is going to render exactly over a scaling method. my 2c worth.

Further Reading: http://css-tricks.com/css-media-queries/

Upvotes: 0

Related Questions