CODEWITHSUNDEEP
htmlcssfontszurb-foundation
Akansh
Akansh

Reputation: 1785

How to make font-size responsive with foundation framework?

While using foundation framework, I need to make font-size responsive.!The website has two columns 8x4. I have navigation and other links in 8 columns. The height of this block is stable. But, In the 4th column I have description and while opening in the different windows size I am seeing the different height of the description. I want that the height remain constant while changing the size of the screen by increasing the font proportionately.

I have tried media queries and assigned different font percentage for different screen size. 150% for max-width 1500 and font-size: 200% for font-size. But with this other features provided by foundation framework changes. Like paragraph bottom margins

I even tried vh, vw but same problem comes up. Please suggest some way to solve this issue.

Layout of the site

Upvotes: 3

Views: 1881

Answers (2)

kishanW
kishanW

Reputation: 49

I think article might help you,
http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

Or what you can do it start with a layout which supports equal + full height columns. Examples:

Equal Height Columns

Full Height Columns

_

Upvotes: 1

Ted
Ted

Reputation: 14927

Maybe using vm/wh units...

vw, vh and vmin (Copied from this page)

These new properties allow you to scale font sizes according to the viewport dimensions, i.e.

1vw is 1% of the viewport width

1vh is 1% of the viewport height

1vmin is the smallest of 1vw and 1vh

For example, assume your browser viewport is set to 1,000 x 1,200 pixels:

1.5vw = 15px font size

1.5vh = 18px font size

1.5vmin = min(1.5vw, 1.5vh) = 15px font size

HTH, -Ted

Upvotes: 0

Related Questions