Solved

how do you make text expandable in the browser

Posted on 2012-04-12
12
137 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

911 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

19 Experts available now in Live!

Get 1:1 Help Now