Loading...

Responsive Target Screens Sizes

Export Kit makes it easy to create Responsive target screens for mobile, web and desktop projects. You can customize your design to match any requirement, and target unlimited screens.

DO NOT create css screen folders BEFORE you have approved the overall design of ALL pages included in the Output.

This will save you lots of editing time.
At this point you should save a copy of your current [.psd] file, this is just a backup.
Read our tutorial on Converting a PSD to Responsive CSS for a full step-by-step tutorial.

Adding Target Screens

You can cut and pates any of the following tags and use them as your responsive css folder group name inside your PSD.

You MUST place your smaller CSS target screens BELOW the larger ones or you will have unexpected results in your output.

Mobile

${css|screen:160} Smartphone All (+older)
${css|screen:240} Smartphone Portrait
${css|screen:321} Smartphone Landscape
${css|screen:760} Tablet

Android

Note that default is not required for Android, you should actually set the size you are targeting, also try to use p = portrait or l = landscape in the screen name .

Read more about working with Android and Multiple Screens.
${css|screen:800} p-2560 xhdpi / 1280 mdpi
${css|screen:960} l-1200 xhdpi / 1080 mdpi
${css|screen:600} p-1200 xhdpi / 1080 mdpi
${css|screen:384} p-768 xhdpi
${css|screen:360} p-720 xhdpi / 1080 xxhdpi
${css|screen:533} l-480 hdpi
${css|screen:320} p-480 hdpi

iPhone / iPad

${css|screen:640} iPhone
${css|screen:750} iPhone 6
${css|screen:768} iPad
${css|screen:1024} iPad Mini
${css|screen:1080} iPhone 6+
${css|screen:2048} iPad Retina

Websites

${css|screen:768} Monitors All (+older)
${css|screen:1024} Desktop Safe
${css|screen:1224} Desktop / Laptop
${css|screen:1824} Widescreen

LOGIN NOW: Get instant access to our free Online Training - click here.

Products For Smart Professionals


smart_images_base_set

Smart Images Base Set

smart_psd

Smart PSD Batch

smart_images

Smart Images

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:

Helpful
Confusing
Outdated
Broken Links
Bad Spelling
Too Short
Too Long

This page needs:

Nothing
Better Content
Links
Examples
Videos

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

Top