Justify small block of text for different devices

HI, I was wondering if there’s a way to insert and justify, say 6 lines of text, about 25 words of font-size : 14px, I have been able to insert this block of text and justify it, but it is only justified at some screen sizes, so the rendering is inconsistent, even though I use a specific CSS with for the text. Basically, I’d like to know if there’s a way to make the lines of text look justified across all devices (without having to resort to using an image of the text). I use media queries. Thanks.

It would help to see your HTML and your CSS. If you don’t want us to see your copy, feel free to IPSUM LORUM it, but we need to see what you’re talking about because what you’re asking should be simple enough to do, so it must be something in either your HTML markup or your CSS which is causing the inconsistent display.

1 Like

If you use text-align:justify on the container then it will justify the text within (assuming that there is enough text on a line to justify).

If the text is becoming un-justified at some widths then either your media queries are over-riding the rules or there is not enough text to be justified.

As Dave says above we really need to see a demo of the problem or at least see your full html and css.

ok, this is the link (text block at top of page): www.profesornativo.com Thanks.

On what devices isn’t that working?

first: you shoulnt be thinking “device” , you should be thinking screen-width.
second: for what I see, at the smallest screen width your entire styling goes away at 480px or so.

in any case, it’s likely you have your entire styling rule within the @media query(s). If you want an element to maintain it’s styling regardless of screen size, you should make those SPECIFIC declarations outside the @meda…{}

for example if you ALWAYS wanted your paragraphs to be red:

p {color :red; font-size:18px;}
@media screen and (max-width:480px){
p {color :red; font-size:11px;}
}

hope that helps

Well, on my laptop the text at the top isn’t justified (I mean the last line is shorter), but on my 4.,5" smartphone, all the lines look justified on vertical and horizontal screen. The rest of the site seems to adapt fine to all the different screen sizes. But if I alter the width to get it justified on my laptop, the last line will be shorter on narrower screens (mobiles etc),. I couldn’t get the text to look the same on all the different witdth screens, even with media queries.

Did some quick research and from what I have read, that’s the way text-align: justify works - it will only justify text that has word wrapped, so the last line doesn’t word wrap justify.

You can try this solution: http://blog.vjeux.com/2011/css/css-one-line-justify.html

1 Like

Except for a fluke where the last line contains exactly enough text to appear to fill a line, the last line is never justified. To be justified, a line of text must wrap to the next line. The last line does not wrap and therefore is not justified. While it can be done with extra code, it would be very unusual.

If you expect text to look exactly the same on all devices, you might need to do something else for a living else you will be prematurely gray. By the nature of differences in browsers and people, the layout will differ from device to device and according to the user’s settings.

Really? It looks ok to me on a 4.5" and a 5" phone, although on a Blackberry bold, one of the menu tabs has about double the correct height. Also in some online simulators, it looks a bit skewed, but I’m not sure how reliable those simulators are…I have modified the css of the text width a bit and it looks ok (not perfect) - at least on my laptop and on a couple of smartphones