Greg Hendershott Greg Hendershott -4 years ago 49
CSS Question

Change text-align responsively (with Bootstrap 3)?

I'm using Bootstrap 3 for a blog. In my custom CSS, I recently added

body {
text-align: justify;
...
}


I like the result on bigger screens (tablet, desktop). But on small screens (phone), justified text doesn't work very due to the narrower columns plus my blog's occasional use of
long-ish-technical-terms-like-this
.

Can I responsively have
text-align: justify
only on bigger screens?

Is it possible to do so solely via CSS, or, would I need to write some custom JS to do so?

Answer Source

Yes, like this (where your breakpoint is set at 48em):

body{
    text-align: left;
}
@media screen and (min-width: 48em){
    body{
        text-align: justify;
    }
}

The second rule will override the first if the viewport width is greater than 48em.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download