Solved

bootstrap - increase font size without site blowing up

Posted on 2014-02-20
12
773 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

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.
This article discusses four methods for overlaying images in a container on a web page
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

777 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