Jump to content

Archived

This topic is now archived and is closed to further replies.

jmad

Responsive Text

Recommended Posts

jmad

I would like for the headers to size responsively throughout the site.  I've coded it this way and have each header level set to it's own scale.  However, is there a better or recommended way of handling this in DMS?

 

h2{
  letter-spacing: 1px;
  font-family: 'Montez', cursive;
  &{@media(max-width: 767px){
      font-size: 40px;
      &{@media(max-width: 480px){
          font-size: 32px;
        }
      }
    }
  }
}

 

 

Share this post


Link to post
Share on other sites
James B

Hi there, I would usually use em values instead of static font sizes, then they'll scale down without you having to put in the size options. See the part on text here - http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design

 

I've looked at other methods people are using, I've never used this personally but might be an easier option using viewport size to change the font size. http://css-tricks.com/viewport-sized-typography/


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
jmad

James B 

 

On the em values how does that mesh with DMS? Under Layout Mode, if I select percentage based layout does it affect the padding you enter section options (which are in pixels)?  Does selecting the Layout option of percentage put the DMS fonts into % or em automatically?  If I customize the fonts to be em and use @media and font percentage then will they rescale based of the base font size selected?  An example of what you mean would be great.

 

 

Second option I think isn't great because from what I understand doesn't rescale without the window being refreshed.

Share this post


Link to post
Share on other sites
Danny

The way we do it in DMS for example lets use the Masthead is the pretty much the same way you have done it. We resize the Masthead title for each device width.

 

@media screen and (max-width: 980px){
.masthead .masthead-title {
font-size: 72px;
}
}
 
@media screen and (max-width: 768px){
.masthead .masthead-title {
font-size: 54px;
}
}
 
@media screen and (max-width: 480px){
.masthead .masthead-title {
font-size: 45px;
}
}
 

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×