Im mobile optimising my site with media queries and making it into a 1 column layout. I want the header text at the top to be the full width available while staying on one line.
I guess I could make multiple media queries for different screen widths, each making the text a different size. However is there a smarter and quicker way of doing this?
Thanks
Hmm, this should be tricky. I understand you are referring to text. Depending on the font used in your layouts and the font used by the user-agent, the width of your text may vary from browser to browser.
This also means whenever you change the content of your header, you will have to change the scaling of your font.
Maybe it would be better to use a graphic instead and scale it via width=100%
Otherwise your solution will probably involve some javascript… pretty nasty for a mobile site. 🙂