How to create a mobile preview tool with pure CSS
If you’re creating, selling or customizing different kinds of responsive templates for HTML, emails, WordPress, Ghost, Joomla, Drupal, Shopify or any other related platform: you have to present your demos in the most appealing way. Having a great preview tool for your responsive designs is the key to more customers and sales.
He was inspired by a pen created by Felix Rilling which uses pure CSS to display a phone with an iframe embeded, allowing you to preview responsive sites. Ashley took the original code and modified it to make it easy to preview a site for different mobile screen sizes and added a rotational animation after the iframe loads.
Here is a demo with our site:
Have a look at this pen for a full-width preview.
Now, let’s get back to the code. Let’s see how we can achieve this result. Here is the CSS and HTML code of this great preview tool. Feel free to customize it and create other cool experiments or even tools: