Solved

bootstrap - increase font size without site blowing up

Posted on 2014-02-20
12
776 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 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
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

In this post we will learn different types of Android Layout and some basics of an Android App.
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

726 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