Jump to content

Hero Header Text Not Responsive

Recommended Posts


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
James B

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;

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • StuLeeUK
      By StuLeeUK+
      Good morning,
      I have set up my homepage using the Elements sections, a Masthead at the top and then a selection of Heroes lower down.
      I only just realised that the Heroes set a H1, as does the Masthead.
      Is there an easy way I can change the Heroes to an H2/H3 etc so as to improve the structure of my headers, whilst keeping the Masthead as H1?
      I really don't know much at all about CSS, which is why I use Pagelines because it's just so easy to create good looking pages without too much confusion.
      page for reference is https://www.avangocouriers.co.uk
    • floydwebb
      By floydwebb+
      The parallax and hero sections are jumping to the top of the template in PL5 See  here http://screencast.com/t/TLajih8MEM6
      No matter what I do, clear browser cache, whatever. The Parallax with the embeddded Hero section will ot stay on the bottom of the page above the footer.
      Help, please. This started happening at the worst possible time, when I was in a client meeting walking here through the site that is already LATE. 
      Floyd Webb
    • hibbsy78
      By hibbsy78+
      Following the latest updates I now have an issue with the hero section on mobile. The content is extremely narrow. All looks ok on desktop....

    • hibbsy78
      By hibbsy78+
      I just spotted the standalone Heroes section as opposed to the Elements>Hero section and I much prefer this layout with the larger text directly under the heading but again on mobile (iPhone) it screws the layout similar to the contact form 7 page (http://www.johnhibbs.me/contact/).

    • hibbsy78
      By hibbsy78+
      Mobile layout much better in 5.0.3. There appears to be an issue that it 'super-sizes' the background image?