Solved

how do you make text expandable in the browser

Posted on 2012-04-12
12
139 Views
Last Modified: 2012-04-14
how do you make text expandable in the browser, it was my understanding that you use em's inside a % div. See the attached file. what am I doing wrong.
expandType.html
0
Comment
Question by:designaire
  • 5
  • 5
  • 2
12 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 37840312
I looked at your file but I don't know what you mean by 'expanding text'.
0
 

Author Comment

by:designaire
ID: 37840368
Type that scales with the browser. Get's larger and smaller.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 37840936
Your file appears to work fine in Firefox to zoom larger and smaller.  Where is it not working?
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 16

Expert Comment

by:s8web
ID: 37842193
Yep, looks good in Chrome too.
0
 

Author Comment

by:designaire
ID: 37842355
The type doesn't change size, I thought you could make the actual type scale. The box around it does and it fills in the box but the size of the type doesn't change. I'm using firefox.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 37843993
The type size does change in Firefox 11 on my computer.
0
 

Author Comment

by:designaire
ID: 37846283
I need to use media queries
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 37846564
What does that mean and what does it have to do with your original question?
0
 

Author Comment

by:designaire
ID: 37846742
The text needs to shrink with different settings, through media queries. Media queries have different browser widths and you can change the css for that width. In the css you change the size of the text. Text doesn't shrink in percentages like images can, I thought i could.
0
 
LVL 16

Expert Comment

by:s8web
ID: 37846842
I don't see any media queries in your attached file.
0
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 200 total points
ID: 37846907
Your file works fine for 'zoom' in standard browsers.  For 'media queries', you have to add something to the file to handle them.  Here http://www.w3.org/TR/css3-mediaqueries/ is the 'official' word and 'media queries' is not official yet, requires HTML5, and is part of CSS3.  So your target audience browsers have to understand HTML5 and CSS3.  This article has more info: http://www.alistapart.com/articles/responsive-web-design/
0
 

Author Comment

by:designaire
ID: 37847420
That's what I was trying to say. I have the alistapart book. For some reason I thought the text could expand to moblie size without media queries.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Create tabs to show divs 9 35
Hide un-named HTML Label with CSS 14 36
Remove Space when printing webpage - Setup in Print.css 3 14
GET error with Font Awesome 3 14
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
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…

856 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