Solved

bootstrap - increase font size without site blowing up

Posted on 2014-02-20
12
774 Views
Last Modified: 2014-02-20
How do I change the font size on this beta bootstrap page without negatively impacting the layout?  When I add a font size declaration to my ccs file in the body tag, the layout goes wacko.

http://nsitedesigns.com/nsitedesigns/wiplastic_scott/index.html
http://nsitedesigns.com/nsitedesigns/wiplastic_scott/css/wiplastic2.css
0
Comment
Question by:nsitedesigns
  • 7
  • 4
12 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 334 total points
ID: 39874664
What font size should it be?
You are setting it to 0.8em currently ergo why its so small. (wiplastic.css line 124/211)
And your headings to 1.1em (line 102)
0
 

Author Comment

by:nsitedesigns
ID: 39874680
A friend is helping me convert an existing html site to bootstrap.  Still have bugs to work out.  I am having problems modifying the css and having it display correctly without busting the columns all up.

Live site (html)
http://www.wiplastic.com
http://www.wiplastic.com/wiplastic.css
0
 

Author Comment

by:nsitedesigns
ID: 39874685
p.s.  Not sure why the font was set to tiny to begin with.  I can't even read it on my end on my desktop.  But when I change the font-size in body tag it pushes the columns all over the place.
0
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 
LVL 58

Expert Comment

by:Gary
ID: 39874700
Just amend the element font size values to a higher em.
0
 

Author Comment

by:nsitedesigns
ID: 39874707
I changed the p tag from .8em to 1em.  I uploaded file.  The font isn't changing.  Still looks microscopic.
0
 

Author Comment

by:nsitedesigns
ID: 39874719
Ah, now it is working.  Geez, hard to troubleshoot when there is a cache thang going on.  Right now, I really really really really really do not like bootstrap.  I hope I hang in there because it is supposed to be God's greatest gift to web masters.  Right now, it is the devil incarnate!
0
 
LVL 58

Expert Comment

by:Gary
ID: 39874725
LOL
Changing a site to bootstrap is harder because you have things already setup the way you want which can cause conflicts sometimes fighting against BS's own styles.
You will find starting a site from scratch using BS will be a lot easier.
0
 

Author Comment

by:nsitedesigns
ID: 39874730
Why do fonts display so much smaller using bootstrap?  I mean geez, the p tag is set to 1.3 em which is normally what I set my h2 tags to.
0
 

Author Comment

by:nsitedesigns
ID: 39874747
does my personal css file overwrite the bootstrap.css file?
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 334 total points
ID: 39874774
They don't - you are setting your own body font size, overriding bootstrap's.
em's are scalular - their size is relative to the base font size.  1em can mean different sizes based on the base size.

Edit
Yes
Thought I had posted this.
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 166 total points
ID: 39875115
Bootstrap does use pixels,  It might be easier in the end to go back and convert the ems to  pixles using 1em=16px.   Bootstrap will scale appropriately.

>Right now, it is the devil incarnate!
It is still a lot easier than adding what seems like simple media queries https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries.  

I think the hardest thing to wrap your head around at the start is dealing with morphing your page in different viewports.

Short term frustration....long term happiness :)
0
 

Author Comment

by:nsitedesigns
ID: 39875180
bring on the peas and happyness!

lol
0

Featured Post

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
With the power of JIRA, there's an unlimited number of ways you can customize it, use it and benefit from it. With that in mind, there's bound to be things that I wasn't able to cover in this course. With this summary we'll look at some places to go…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question