Archived

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

  • 0

Hero Header Text Not Responsive


Question

Posted · Report post

Here's another one for the community... I seem to be having an issue where the header text in my hero sections are not responsive, so on a mobile screen (or narrow browser window) the the header extends outside the section.

 

You can see what I mean here: http://bapjc.org/istm/course-descriptions/

 

Any help with this would be greatly appreciated.

Share this post


Link to post
Share on other sites

2 answers to this question

Posted · Report post

Awesome James!  You are very helpful!

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there, the hero unit comes directly from Twitter Bootstrap and is written to keep that header on that scale. This is an example from the bootstrap homepage where I've resized the hero unit - http://screencast.com/t/p8rIN8Xakp2

 

However, you can set a max-width using css for the h1 using the method below which I found on this link, http://stackoverflow.com/questions/9651467/how-can-i-get-my-page-headers-to-resize-using-responsive-layout

 

@media(max-width: 480px) {
.pl-hero h1 {
    font-size: 12pt;
  }
}

Share this post


Link to post
Share on other sites