4
\$\begingroup\$

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


Desktop Desktop

Tablet Tablet

Mobile
enter image description here

This is the what I currently have as code

HTML

  <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;
  } 
}
\$\endgroup\$
  • \$\begingroup\$ (Note: trial and error based on what you're seeing is error-prone, I often see overflowing text on my browser because of this.) \$\endgroup\$ – Quentin Pradet May 17 '13 at 6:55
  • \$\begingroup\$ @QuentinPradet breakpoints were calculated but then when I actually tested, things would often produce undesired results. Hence trial and error was the helpful. And you can prevent overflowing text by containing it in divs with defined widths and padding, and text in the <p> tags (if I am understanding your comment correctly). \$\endgroup\$ – JGallardo May 17 '13 at 16:34
1
\$\begingroup\$

If you have control over your html, give both headers the same class, for example .header-stretch. For media queries - you actually can get rid of min-width. Yep, your code will be overriden for several times. But browser won't care rewriting the same parameter(font-size in this case - in any other you can do so) so it should be like this:

@media screen and (min-width: 951px) {
  .header-stretch {
    font-size: 36px;
  } 
}
@media screen and (max-width: 950px) {
  .header-stretch {
    font-size: 24px;
  }
}
@media screen and (max-width: 749px) {
  .header-stretch {
    font-size: 22px;
  }
}
@media screen and (max-width: 569px) {
  .header-stretch {
    font-size: 20px;
  }
}
    @media screen and  (max-width: 321px) {
  .header-stretch {
    font-size: 18px;
  }
}
\$\endgroup\$
  • \$\begingroup\$ Yes I am also the person writing the HTML. The reason for two classes is that the page title for the video page needed different margins because of how the rest of the content fits on the page. But after thinking about your suggestion, I am very happy you brought that up because I could reduce some code by just creating an additional class for font sizes. \$\endgroup\$ – JGallardo May 17 '13 at 16:38
1
\$\begingroup\$

As an alternative, you can try to use http://fittextjs.com/ Maybe it will suit you even more than creating custom media queries

\$\endgroup\$
0
\$\begingroup\$

It might not be relevant but:

1) Write your default code for mobile, and then use mediaqueries for bigger screens.

2) Dont use tag or id selectors (search web for explanation)

3) Use em based values instead of pixel based.

\$\endgroup\$
  • \$\begingroup\$ The challenge when writing default code for mobile is that our site has 60% visitors from desktop, specifically from IE8. Hence why I tend to write for the main target. Most mobile will support the media queries, hence why I add the media queries for them. \$\endgroup\$ – JGallardo Jun 10 '13 at 16:15
  • \$\begingroup\$ You can use code.google.com/p/css3-mediaqueries-js which is a mediaquery polyfill for IE8 \$\endgroup\$ – tolborg Jun 10 '13 at 17:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.