it is a responsive theme and the h1 text/site-logo on top remains a large h1 tag when the width is shrunk.
when the browser is very small, like on a cell phone, id like to have the title shrink down and remain horizontal, and not have the text fall beneath each other.
whats the most effective way to do this, and im really not experienced with media queries so any advice with some kind of example would be appreciated as well.
it makes sense but with my lack of knowledge on media queries, i made these changes and the picture on the home page gets stuck and the h1 text on top remains at one size, this also negatively effected the menu as well .
Ok, so a little investigating revealed that you pasted it into another media query, which is why it didn't work....also, for some reason, jsfiddle added in some strange characters....so, I went ahead and resized it as necessary for you...
Replace the code in you "media-queries.css" with all of the code in the pastebin below:
Now the font will resize and this resizing will be done based on the width of the browser. No media queries, no nasty tricks. Just standard CSS that works on every browser.
The golden formula is: target : standard = font-size in em
@strauss884 : Like @chriscoyier pointed out, fittext.js is simply amazing. I have used it quite a few times. I suggest looking at Chris's forked copy though. Take advantage of the parameters with fittextjs because it will really control the size.
it is a responsive theme and the h1 text/site-logo on top remains a large h1 tag when the width is shrunk.
when the browser is very small, like on a cell phone, id like to have the title shrink down and remain horizontal, and not have the text fall beneath each other.
whats the most effective way to do this, and im really not experienced with media queries so any advice with some kind of example would be appreciated as well.
Thank you
http://jsfiddle.net/p9DZV/
Should be a good simple example...
im scared :(
Replace the code in you "media-queries.css" with all of the code in the pastebin below:
http://pastebin.com/Zjd1Mwx7
Now the font will resize and this resizing will be done based on the width of the browser. No media queries, no nasty tricks. Just standard CSS that works on every browser.
The golden formula is:
target : standard = font-size in em
Vermaas,
Can you help me with this. I'm trying to what you suggested above and it doesn't seem to be working for me.
@strauss884
Do you have link or, if not, put your HTML/CSS in Codepen and we can look further.
Make sure to also check out:
http://fittextjs.com/
and
http://css-tricks.com/viewport-sized-typography/
@strauss884 : Like @chriscoyier pointed out, fittext.js is simply amazing. I have used it quite a few times. I suggest looking at Chris's forked copy though. Take advantage of the parameters with fittextjs because it will really control the size.
gsld.net/civic2/civic2.html
I want the caption text to shrink so it looks more appropriate in relation to size of photo on smaller devices and window sizes.