Geek Answers Handbook

Changing the default font size of a Zurb Foundation 4 object causes layout width issue

My requirement is that if the type of developer has any text anywhere on the web page without a specific tag ( <p> , etc.), the font size should be the same as the font size <p> .

In foundation.css I changed html,body { font-size:0.85 } . With this edit, the entire layout (entire site template) is compressed. The increase in size causes a virtuoso.

Is there any other way to properly embed our own default font size on the foundation without prejudice to the template?

Are there any suggestions for meeting my requirement without adding a new font size attribute to the content wrapper?

+4
source share
4 answers

Zurb uses the font size you specified in the html, body {} style to calculate the width of the site. Regardless of the fact that you set the font size value, it becomes one on the whole site. If you look further in css, you will find a definition for .row {} that looks like max-width: 62.5em.

As you can imagine, when you decrease the value of 1em, this value of 62.5em for strings will also decrease. I don't know much about changing it using the css version of zurb, since I always used the sass stone, but you can adjust the amount of ems for the line width.

Try:

desired site width / body font size in px = number of ems, maximum value of the line width.

eg.

If you want a width of 960 with a base font size of 12px

960/12 = 80

So, you would set the line width max to 80em.

I am sure that someone the best specialist will come and give the best answer, but that’s how I understand the grid.

+13
source

It sounds like you are not using sass, so this will not help this particular person, but if you are using sass , pay attention to this comment in the source code of the components/_variables.scss :

the typical default browser font size is 16 pixels, which makes the calculation for the grid. If you want your base font size to be different and not have the effect of grid control points , set $ em-base to $ base-font-size and make sure $ base-font-size is a px value.

(in italics)

so before importing any or all sass files, you should write something like this:

 $base-font-size: 12px; $em-base: $base-font-size;

Note: “The typical default browser font size is 16 pixels” from the above. Foundation uses normalize.css, and normalizes this default value.

+5
source

Do not modify foundation.css , but instead define your own style in your own "separate" css file. If you do this, for example:

 body { font-size: 1.5em; }

And having the following layout, you will see that the grid still matches the width of your device / browser.

 <div class="large-12 columns"> <div class="row"> <div class="large-4 columns"> <div class="panel"> <p>Four columns</p> </div> </div> <div class="large-4 columns"> <div class="panel"> <p>Four columns</p> </div> </div> <div class="large-4 columns"> <div class="panel"> <p>Four columns</p> </div> </div> </div> </div>

See here in action

+1
source

The simplest solution I can imagine is to create a wrapper element around your content areas (or the entire page) and change the font size as follows:

 <div class="content"> <p>My stuff</p> <a href="#" class="button">A button</a> </div>

Then in your CSS:

 .content * { font-size: 90% !important; }

Unconfirmed, but I'm sure in the past I did something similar.

0
source

More articles:


All Articles