Fake the BR if your client wants everything to “line up” (especially the text!!)

Posted on Posted in Tips

If I had a quarter for every time someone said they wanted to ‘line everything up’ on their website. It’s a terrible goal. It never works and you end up chasing your tail because there are almost infinite device and browser window sizes. What lines up on 800px wide might not on 810px of 790px. Here is a hack if someone won’t let it go. Use a br tag with the class mobibr then apply the rule where you need it (in this case at 1024 my mobi br is hidden so the line break does not occur.

<h2 style="color:#000;margin-bottom:40px;">
Mars Sales Event<br>
Saturday, December 7 &amp;<br class="mobibr">
Sunday, December 8, 2019</h2>

<style>
 @media (max-width:1024px){
    .mobibr{
      display:none;
    }
  }
</style>

HTML File