Responsive Editor Tool

A more updated overview over the new responsive features available in CSS Hero > 1.3, about the new Landscape mode and desktop-only edits,  can be found in this post

CSS Hero allows you to edit and save your website in three different views:

  • DESKTOP (a normal computer monitor)
  • TABLET (iPad or Android tablet)
  • SMARTPHONE (iPhone or other common smartphone model)
responsive editing css

The Responsive CSS Editing Interface


Editing css for responsive website

Tablet Portrait View

editing responsive wordpress theme for iphone

Iphone Portrait View

Editing and Save in Responsive view

With CSS Hero you can SAVE in three different values ​​for each different views.

If you are in Desktop Mode, your actions will generally reflect on all other modes – unless you have some more specific rules winning over.

If you are in Smartphone Preview Mode, your changes will be applied only for Smartphones – basically,  the resulting CSS rules will be wrapped in a media query.

Let’s say you want a to have a big Site Title (font-size 63px) on Desktop devices   without compromising the view on mobile devices.

We set for Font-size three different values :

  • Desktop: 63px
  • Tablet: 49px
  • Smartphone: 22px

Watch carefully the snapshop below:

Saving in desktop mode

Editing and Saving in desktop mode

Saving in tablet mode

Editing and Saving in tablet mode

Saving in Smartphone view

Editing and Saving in Smartphone mode

CSS Hero is the definitive plugin to customize your WordPress themes with an easy and intuitive WYSIWYG interface.


Become a CSS Hero affiliate and earn 40% on each sale right now. Spread the CSS Hero word and share the wealth with us!
Start Earning →

Follow the Hero