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)
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: