Jacob Paris
← Back to all content

Break text responsively

Every once in a while I find myself writing paragraphs of text that look fine on desktop, but on mobile are an indecipherable wall of text that would make Tolkien proud.

To get around this, I've started using <br /> elements between each sentence in my paragraphs and then using media queries to hide them on larger screen sizes.


2 Spicy jalapeno bacon ipsum dolor amet ball tip
3 meatball burgdoggen cupim buffalo elit beef
4 shank.
5 <br class="minor" />
6 Ball tip biltong shoulder, officia tenderloin
7 duis ut voluptate proident cupidatat bacon
8 reprehenderit capicola.
9 <br class="major" />
10 Sunt in in, non filet mignon flank chuck cow
11 eiusmod laboris officia alcatra aute.
12 <br class="minor" />
13 Officia commodo ut in, meatloaf veniam velit eu
14 consequat.
15 <br class="major" />
16 Magna corned beef tail short loin enim, pastrami
17 picanha shank meatloaf in burgdoggen pancetta
18 frankfurter t-bone.
1br {
2 line-height: 2rem;
3 @media screen and (min-width: 500px) {
4 &.minor {
5 display: none;
6 }
7 }
8 @media screen and (min-width: 800px) {
9 &.major {
10 line-height: 1rem;
11 }
12 }
13 @media screen and (min-width: 1000px) {
14 &.major {
15 display: none;
16 }
17 }

You can tweak the breakpoints to match your specific layout.

Demo here: https://codepen.io/anon/pen/dEyPep

Professional headshot

Hi, I'm Jacob

Hey there! I'm a developer, designer, and digital nomad with a background in lean manufacturing.

About once per month, I send an email with new guides, new blog posts, and sneak peeks of what's coming next.

Everyone who subscribes gets access to the source code for this website and every example project for all my tutorials.

Stay up to date with everything I'm working on by entering your email below.

Unsubscribe at any time.