I am working on page titles to be responsive. The code I have works and gets the job done, but I know that this is verbose. I decided upon the widths by trial and error based on how the words were stacking on each other DesktopTabletMobileThis is the what I currently have as codeHTML  <div class=row>    <div id=page-title>      <h1>BruxZir<sup>&reg;</sup> Solid Zirconia Crowns &amp; Bridges</h1>    </div>CSS#page-title, #page-title-video {   background: url(../img/top-banner.jpg) #273344 no-repeat right top;  padding: 0.2em 0 0.2em 1em; }#page-title { margin: 12px 15px 24px 15px; }#page-title-video { margin: 12px 0 24px 0; }#page-title h1, #page-title-video h1 {   color: #FFFFFF;  letter-spacing: 0.08em;}@media screen and (min-width: 1px) and (max-width: 321px) {  #page-title h1, #page-title-video h1 {    font-size: 18px;  }}@media screen and (min-width: 322px) and (max-width: 569px) {  #page-title h1, #page-title-video h1 {    font-size: 20px;  }}@media screen and (min-width: 570px) and (max-width: 749px) {  #page-title h1, #page-title-video h1 {    font-size: 22px;  }}@media screen and (min-width: 750px) and (max-width: 950px) {  #page-title h1, #page-title-video h1 {    font-size: 24px;  }}@media screen and (min-width: 951px) {  #page-title h1, #page-title-video h1 {    font-size: 36px;  } }
Minimizing CSS media queries for the page title?
html;css