Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

bootstrap - increase font size without site blowing up

Posted on 2014-02-20
12
Medium Priority
?
792 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 4
12 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 1336 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
Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

 
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 1336 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 54

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 664 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

Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

Question has a verified solution.

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

What do responsible coders do? They don't take detrimental shortcuts. They do take reasonable security precautions, create important automation, implement sufficient logging, fix things they break, and care about users.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

597 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