I've noticed that two words that need to be side by side (the company name) keep dropping a line when re-sizing the browser. Does anyone know of any hacks or such to stop certain words wrapping? I could use white-space: no wrap; but it's only for two words - I don't want them to break.

 

E.g. at desktop size, the company name will read all one line - for instance - 'Sony Pictures', but between resizing between the desktop and tablet media queries, 'Pictures' drops to the next line. I need 'Sony' to drop down onto the same line if that's the case. Do you reckon I'm going to have to use some <span> trickery to target the exact words?

 

I don't know if this makes much sense as I don't think I've explained it that well

Not sure what you mean, but what if you set the font-size to ems and specify lower % for the text on lower res?

So the text resizes down a bit and doesn't break. Does that make sense?

Thanks, Teodora. I'm currently working in ems but a bit unsure how you would go about resizing them a bit. At the moment I use media queries based on the the breakpoints of the image and text so to speak, rather than media queries for devices. With the MQ's I resize the text ranging from 2ems to 0.875ems in some cases.

 

I'll play around a bit with percentages and see what results I get, though. Thanks!

Not sure how to explain well, I meant something like this:

 

Set the body font to %:

 

body{
font:100% Arial;
}
#your-text{
font-size:1em; //for example
}

Then you can specify for lower res:

 

body{
font:90% Arial;
} 

and all the text in ems will resize down. Not sure if that is what you are looking for, hope it makes sense anyway

 

Let me know how it's going

Thanks I never thought of resizing the body text - usually target individual areas. I'll give it a try.

 

Congrats on getting over 200 likes! Awesome

you could also place the text in a div with a fixed width to stop the lines breaking.

 

But like posted above changing the text size with media query's and targeting the body font size. Both of these could be used together to ensure it doesn't break.

you could also place the text in a div with a fixed width to stop the lines breaking.

 

But like posted above changing the text size with media query's and targeting the body font size. Both of these could be used together to ensure it doesn't break.

 

Thanks for the reply, but that adds one too many divs for what I already have. I'm currently experimenting with the body font size which is working quite well, but my last resort (should I need it) is adding some span classes to the text and tinkering with the stylesheet

Congrats on getting over 200 likes! Awesome

 

Thank you, you are not far off

 

 

you could also place the text in a div with a fixed width to stop the lines breaking.

 

Yes, that is a good solution, too, you only have to change the width of the div not to exceed the screen res on smaller screens.

You can do the same with spans. Just set their display property to block and then you can give them a width.