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.
https://codepen.io/anon/pen/dEyPep
1<p>2 Spicy jalapeno bacon ipsum dolor amet ball tip3 meatball burgdoggen cupim buffalo elit beef4 shank.5 <br class="minor" />6 Ball tip biltong shoulder, officia tenderloin7 duis ut voluptate proident cupidatat bacon8 reprehenderit capicola.9 <br class="major" />10 Sunt in in, non filet mignon flank chuck cow11 eiusmod laboris officia alcatra aute.12 <br class="minor" />13 Officia commodo ut in, meatloaf veniam velit eu14 consequat.15 <br class="major" />16 Magna corned beef tail short loin enim, pastrami17 picanha shank meatloaf in burgdoggen pancetta18 frankfurter t-bone.19</p>20
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 }18}19
You can tweak the breakpoints to match your specific layout.
Demo here: https://codepen.io/anon/pen/dEyPep