Welcome CSS Hero 1.3 – introducing Landscape mode and desktop-only edits

Since we started our journey working on the very first CSS Hero alpha version we never stopped developing and going further to make our plugin more powerful and smart while keeping it easy to use both for the skilled developer and for the first time user. Today we’re adding another milestone to our development process as i’m really glad to introduce you our latest CSS Hero upgrade which, among the other upgrades, adds full support for landscape oriented mobile and tablet devices.

Landscape Mode

CSS Hero editing in Mobile Landscape mode

CSS Hero editing in Mobile Landscape mode

CSS Hero’s device mode has been one of the most loved features of our plugin, for those unfamiliar with it it basically allows you to visually provide custom responsive edits both for mobile and tablets instead of having to deal with media queries. Now with 1.3 you can switch orientation and apply some edits to portrait or landscape modes with just a couple of clicks.

Enhancing responsive edits with hierarchy

CSS Hero’s responsive edits are now managed hierarchically by automatically extending each edit to lower sized devices, this means that if you apply a css rule on the tablet landscape mode it will be inherited by all other devices (except Desktop of course). If you still want that edit to be different on (let’s say) mobile landscape you can still re-customize it on that specific device mode.

Desktop > Landscape Tablet > Portrait Tablet > Landscape Mobile > Portrait Mobile

CSS Hero Responsive Inheritance schema

CSS Hero Responsive Inheritance schema

However, in some cases you may still want to apply a modification only on the Desktop version while keeping the default style available on devices, since Hero 1.3 you can now easily do this:

Applying an edit ONLY on large screens: desktop-only edits

Sometimes you may need to apply an edit on your site ONLY when being rendered on large screens, usually more than 1024px wide. The typical example is changing a font size on desktop mode while keeping the default font-size readability on devices. Now with Hero 1.3 you can provide Desktop specific edits by simply hitting the Apply only to large screens toggle in your CSS Hero interface:

Applying an edit only on desktop mode

Applying an edit only on desktop mode

By clicking it that specific edit will not apply to all views as it would do normally but will only apply to Desktop mode.

If you’re a long time user of our Plugin you’ve surely noticed that something has changed on the left side of the editor as we’ve re-arranged the edit toolset to the left side of the property box. For those unfamiliar with this useful options here’s a brief description of each of them:

  • The Edited flag [E]
    This element highlights when the current property has been edited, if a re-edit occurs it provides the latest available edit value in case you need to go back
  • The !Important toggle [!]
    If clicked it adds an !important statement to the current edit. Extremely useful when an edit isn’t applying due to the original theme CSS being applied inline or has been applied with a previously set !important statement.

Inspector supported


CSS Hero Inspector previewing Mobile Landscape oriented edits

Of course Inspector has been updated too in order to support the new break points available in CSS Hero 1.3 bringing you an extra control layer on your CSS Hero edits with live code editing.

That’s all folks, CSS Hero 1.3 is available in your Dashboards if you’re already a CSS Hero user, if you’re not go get it now and boost your creativity with the easiest way to customize WordPress Themes, live!

8 responses to “Welcome CSS Hero 1.3 – introducing Landscape mode and desktop-only edits”

  1. Stephen James says:

    Guys! This is absolutely friggin’ huge!! Well done. Can’t wait to get stuck in 🙂

  2. Michael says:




    Completely awesome upgrade.


    Thanks, and Cheers from Downtown Miamisburg,


  3. Andy Rihn says:

    I’m not finding the update in my dashboard – can anyone help me get where I need to be?


  4. Mark Luckinbill says:

    Great work!

  5. pixeldapper says:

    Can the inheritance be switched to mobile first?

    • Hi @pixeldapper:disqus, this actually depends on the theme approach. However you can still apply mobile first edits by editing in ‘tablet-landscape’ mode then applying additional specific edits to desktop mode. By default each edit extends to all lower modes except for Desktop edits which can be set to apply only on large screens.

  6. AnythingButChance says:

    As a WordPress VLOGGER, PLEASE Authors, make one thing CLEAR: Question 1: When you make an edit using CSSHero, is the change automatically added to the appropriate .css file; if so, which ones (custom.css/style.css, etc) OR do I need to copy the code you create into my custom CSS file.
    Question 2: When I make a change to a particular mode, e.g., mobile mode, will it confine those changes to that mobile mode and vice versa, when I make a change to, for example, Desktop Mode, what effect does that have????? Can you email me an answer at: RobertShields@Hotmail.com

Leave a Reply

Have any pre-sale questions?
Please dont hesitate to Contact Us.

Registered Members, need something?
Get started from your Dashboard.