CSS Screen Tag

${ css |screen :args }
- usage : ${css|screen:default}

CSS Screen Tags give you the power to create responsive HTML5 and CSS3 websites from your PSD file. You can define multiple screen sizes to support any number of devices inlcuding desktop, tablet and mobile.

This tag works with folders only.

Common Screen Sizes

You can set the screen size to any custom size, but generally here are a few common sizes:

  • default (required)
  • 320 (mobile)
  • 768 (tablet)
  • 1280 (desktop)
Example: ${css|screen:default}
Example: ${css|screen:1280}
Example: ${css|screen:320px}
Note: You can export unlimited screen sizes but, you should note that multiple screen sizes will increase the export time.

Enable Screen Tags

To enable Responsive CSS layouts, you must enable [Customize] and [Responsive CSS] in exports view. You can also include responsive image assets to reduce the bandwidth on smaller devices such as mobiles.

Download the Layer Tags PSD Templates to test [CSS Screen Tags] with your output.
LOGIN NOW: Get instant access to our free Online Training - click here.

Products For WP Professionals


WP Developer Pack


WP Developer Pack (6 Months)


WP Designer Pack (6 Months)

Need a custom solution?

Try our Shop!

Using the Plugin

Layer Support

Layer Tags

How To Guides

Optimization Tips

Help Us Improve

We aim to keep our content relevant with useful information, examples, samples and links. Tell us what you think!

I found the content:

Broken Links
Bad Spelling
Too Short
Too Long

This page needs:

Better Content

Free Download

Cheat Sheet

A full sample of our support for text, shapes, images and effects.

Start Your 14 Day Free Trial

New users get instant access to the 14 Day Free Trial with all features enabled, and Free Online Training. We guarantee your first conversion will 100% work - we work with you to ensure this, contact us or check our FAQs for assistance.

Connect With Us