The Responsive Grid and Headway 3

The Headway Responsive grid is one of the best, and possibly most under-utilized, features that Headway offers (in my opinion, at least.)  Responsive web design isn’t just “the next big thing” – it’s the definitive direction that the web is moving, and if you aren’t going responsive, you’re getting behind.

Turn it On

Turning on Headway’s responsive grid is easy to do. Once the responsive grid is turned on under the Grid Mode Setup tab, Headway starts to do a few things automatically. Your website is compressed down into one column, and the blocks are rearranged vertically. The responsive grid reads your layout from left to right, top to bottom, the same way you read a book (and, yes, following a common design pattern because it’s how many visitors review a website!) That means usually your header is on top, followed by any other blocks in that area, and navigation, content, and sidebars.  Headway also takes your navigation and rearranges it onto several lines depending on the available width, resizes images and (optionally) videos, and hides any blocks that you’ve designated as hidden.

How Does it Look?

To see the Headway grid in action, check out these two sites: I designed both. Rent a Geek Mom is a simple implementation of responsive design; I didn’t create any custom code or write any extra CSS, I just turned on the grid, hid a few blocks from mobile view, and voila!  A responsive design. Siren Marine is an example of a custom-designed website that uses a lot of custom CSS, and the responsive view also uses a relatively small set of mobile-specific style rules.



Hide any Unnecessary Blocks

Responsive design is all about knowing what to show for mobile users, and what doesn’t matter or isn’t relevant or usable on a mobile interface. There may be blocks that don’t translate well to mobile; certain widgets inserted by a 3rd party plugin may not handle responsive design well, and you may decide to ditch the sidebar, or maybe your footer widget area isn’t critical for mobile visitors. Ditch it to make sure visitors can load your pages quickly, and scroll through to find the relevant content fast and easily.

Each block has an option under the Config tab to hide the block on mobile devices or tablets. In fact, you can even hide blocks on laptops/desktops, though this isn’t a recommended option unless you really know what you’re doing! Choose the appropriate options, save, and check your site out on your phone or using an online mobile emulator to see the results. You can also resize your browser window so it’s very narrow to see the results, too!  (Note: This option does not appear until you enable the responsive grid!)


Spread the word!

25 Responses

  1. Hi, there!
    Responsive is a real treasure in Headway and it should be used from the first day since it was released as a feature. It makes Headway a much easier choice as a WP power tool of the day. So, thank you for promoting this feature. It is lifting up the design services we are trying to provide for the web into another scale.
    Just a thought, but may be it will be helpful if there are some posts or a video dedicated how to handle the responsive feature with a bit more details, for example how to make our hands dirty with some custom pixel adjustments for the different media screens and so on. …just a thought to promote better this feature in the community and for the new visitors interested in becoming part of it.
    Milena and Gerrit

      • I’d love to see an example of 3-column layout with SIDEBAR | CONTENT | SIDEBAR, and how to place the middle columnt (content) first/on top on mobile/narrow screens.

  2. Now only the menu needs to be improved in responsive view.
    If you compare it to pagelines, they have nice & simple drop down menu. Makes the experience a lot less easier.

  3. Hello sir,
    I have made the responsive design option ok but it is not showing perfectly on the devises. So what can I do now? Please help me. I am in very need of it. Thank you

  4. caitlinheadway Caitlin, did you ever put something like this together? If so, can you share the link? If not, can you please let me know? Thanks!

  5. Hi!

    Responsive grid was working and my site looked great on all devices. I was making some updates and now it’s not working.

    Responsive grid is still enabled and it works on other pages (

    Any ideas?


    • Hey Tiffany,

      It looks like it’s working to me!

      Are you still having issues with the responsive grid?

    • Martin,

      Unfortunately not at this time, but this is something we plan on adding in the future 🙂

      Right now the responsive grid takes the document order of the blocks (from left to right, top to bottom). With that in mind, you can adjust the position of your blocks on the Grid and it will update for phones/tablets.

      Please let us know if you have any other questions.

      • Hi Clay – love the design and we use it for our site !

        But – is there a way of forcing our 3-column design into a 1-column on the ipad mini screen?? (1-column works fine with mobile devices but we want to expand it to ipads/tablets because our site looks too crushed otherwise.)


      • actually – don’t worry Clay – I found out how to do it!

        Download Headway 3.6.3 – and set the breakaway point in the wrapper! perfect – tks

  6. Hey Clay,
    Absolutely loving using Headway, it has solved needs on many levels for me and clients I work with. Thank you!
    I wondered if there is anything yet available, such as a video tutorial, that walks us through more in-depth use of the responsive function?

  7. Any articles in break points, when to use them and how to customize css at those break points? I’d love for the wrapper holding my heard image to get taller on mobile devices. Any advice would be really helpful. Thanks!

    • Hi Franklin,

      Have you started a thread in the forum already? If not do so and we’d be happy to point you in the right direction!

  8. Hi,
    I’m currently building a website and can’t get the site to look good with responsive grid enabled. On smaller devices the blocks are still too wide for the devices – you have to sideways scroll to see all the content. I checked out another site built in Headway with responsive grid enabled and everything seems okay. Any suggestions for what might be wrong?


    • Hey Rob,

      There could be an element such as a video, image, or other custom element that has a fixed width and is not allowing the page to resize correctly.

      Please feel free to post in the forums at so we can take a closer look into this.

Leave a reply

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress