Devices
The easiest way to wrap your screenshots on Iphone, Samsung (Android) and Macbook. Make screenshots for Iphone with size 375x812, for Samsung size 480x1066 and for macbook size 500x800.
Potrait
Screenshot Iphone and Samsung (Android) Potrait style.
<!-- Android potrait -->
<figure class="relative">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480.000000 906.000000">
<!-- Clip path image -->
<defs>
<clipPath id="svgf">
<rect x="50" y="16.5" width="480" height="1066"/>
</clipPath>
</defs>
<!-- Phone screen -->
<image clip-path="url(#svgf)" xlink:href="src/img/app/android-potrait.jpg" height="94%" width="100%" style="transform:translateY(15px);"></image>
<!-- Phone cover -->
<image xlink:href="src/img/app/device/android-dark.png" height="100%" width="100%"></image>
</svg>
</figure>
<!-- Iphone potrait -->
<figure class="relative">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480.000000 906.000000">
<!-- Clip path image -->
<defs>
<clipPath id="svgf2">
<rect x="52" y="10" width="380" height="818"/>
</clipPath>
</defs>
<!-- Phone screen -->
<image clip-path="url(#svgf2)" xlink:href="src/img/app/iphone-potrait.jpg" height="92%" width="100%" style="transform:translateY(30px);"></image>
<!-- Phone cover -->
<image xlink:href="src/img/app/device/iphone-dark.png" height="100%" width="100%"></image>
</svg>
</figure>
<!-- Iphone light potrait -->
<figure class="relative">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480.000000 906.000000">
<!-- Clip path image -->
<defs>
<clipPath id="svgf3">
<rect x="52" y="10" width="380" height="818"/>
</clipPath>
</defs>
<!-- Phone screen -->
<image clip-path="url(#svgf3)" xlink:href="src/img/app/iphone-potrait.jpg" height="92%" width="100%" style="transform:translateY(30px);"></image>
<!-- Phone cover -->
<image xlink:href="src/img/app/device/iphone-light.png" height="100%" width="100%"></image>
</svg>
</figure>
Very simple to change screenshot, just edit Phone screen source images. If you use more than 1 style, you must make new id in clipPath.
Landscape
Screenshot Iphone and Samsung (Android) in Landscape style.
<!-- Android landscape -->
<figure class="relative">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 906.000000 480.000000">
<!-- Clip path image -->
<defs>
<clipPath id="svgf4">
<rect y="50" x="26.5" width="1066" height="480"/>
</clipPath>
</defs>
<!-- Phone screen -->
<image clip-path="url(#svgf4)" xlink:href="src/img/app/android-landscape.jpg" height="100%" width="95%" style="transform:translateX(15px);"></image>
<!-- Phone cover -->
<image xlink:href="src/img/app/device/android-dark-landscape.png" height="100%" width="100%"></image>
</svg>
</figure>
<!-- Iphone landscape -->
<figure class="relative">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 906.000000 480.000000">
<!-- Clip path image -->
<defs>
<clipPath id="svgf5">
<rect y="52" x="18" height="380" width="818"/>
</clipPath>
</defs>
<!-- Phone screen -->
<image clip-path="url(#svgf5)" xlink:href="src/img/app/iphone-landscape.jpg" width="96%" height="100%" style="transform:translateX(30px);"></image>
<!-- Phone cover -->
<image xlink:href="src/img/app/device/iphone-dark-landscape.png" height="100%" width="100%"></image>
</svg>
</figure>
<!-- Iphone light landscape -->
<figure class="relative">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 906.000000 480.000000">
<!-- Clip path image -->
<defs>
<clipPath id="svgf6">
<rect y="52" x="18" height="380" width="818"/>
</clipPath>
</defs>
<!-- Phone screen -->
<image clip-path="url(#svgf6)" xlink:href="src/img/app/iphone-landscape.jpg" width="96%" height="100%" style="transform:translateX(30px);"></image>
<!-- Phone cover -->
<image xlink:href="src/img/app/device/iphone-light-landscape.png" height="100%" width="100%"></image>
</svg>
</figure>
Macbook
Screenshot in Macbook.
<!-- Macbook -->
<figure class="relative">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960.000000 574.000000">
<!-- Clip path image -->
<defs>
<clipPath id="svgf77">
<rect y="0" x="5" width="800" height="470"></rect>
</clipPath>
</defs>
<!-- Phone screen -->
<image clip-path="url(#svgf77)" xlink:href="src/img/app/macbook-screen2.jpg" height="80%" width="80%" style="transform:translate(96px, 40px);"></image>
<!-- Phone cover -->
<image xlink:href="src/img/app/device/macbook.png" height="100%" width="100%"></image>
</svg>
</figure>
Iphone and Macbook
<div class="relative" style="padding-bottom:66%">
<!-- Macbook -->
<figure class="absolute top-0 right-0 w-full">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960.000000 574.000000">
<!-- Clip path image -->
<defs>
<clipPath id="svgf77">
<rect y="0" x="5" width="800" height="470"></rect>
</clipPath>
</defs>
<!-- Phone screen -->
<image clip-path="url(#svgf77)" xlink:href="src/img/app/macbook-screen2.jpg" height="80%" width="80%" style="transform:translate(96px, 40px);"></image>
<!-- Phone cover -->
<image xlink:href="src/img/app/device/macbook.png" height="100%" width="100%"></image>
</svg>
</figure>
<!-- Iphone potrait -->
<figure class="absolute left-0 bottom-1 w-1/4">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480.000000 906.000000">
<!-- Clip path image -->
<defs>
<clipPath id="svgf2">
<rect x="52" y="10" width="380" height="818"/>
</clipPath>
</defs>
<!-- Phone screen -->
<image clip-path="url(#svgf2)" xlink:href="src/img/app/iphone-potrait.jpg" height="92%" width="100%" style="transform:translateY(30px);"></image>
<!-- Phone cover -->
<image xlink:href="src/img/app/device/iphone-dark.png" height="100%" width="100%"></image>
</svg>
</figure>
</div>