Solved

bootstrap - increase font size without site blowing up

Posted on 2014-02-20
12
768 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
 
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
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.

744 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now