Device
The easiest way to wrap your screenshots on Iphone X, Samsung s20 (Android) and Macbook. Make screenshots for Iphone X with size 375x812, for Samsung s20 size 480x1066 and for macbook size 500x800.
Potrait
Screenshot Iphone X and Samsung s20 (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-min/app/android-potrait.jpg" height="94%" width="100%" style="transform:translateY(15px);"></image>
<!-- Phone cover -->
<image xlink:href="src/img-min/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-min/app/iphone-potrait.jpg" height="92%" width="100%" style="transform:translateY(30px);"></image>
<!-- Phone cover -->
<image xlink:href="src/img-min/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-min/app/iphone-potrait.jpg" height="92%" width="100%" style="transform:translateY(30px);"></image>
<!-- Phone cover -->
<image xlink:href="src/img-min/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 X and Samsung s20 (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-min/app/android-landscape.jpg" height="100%" width="95%" style="transform:translateX(15px);"></image>
<!-- Phone cover -->
<image xlink:href="src/img-min/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-min/app/iphone-landscape.jpg" width="96%" height="100%" style="transform:translateX(30px);"></image>
<!-- Phone cover -->
<image xlink:href="src/img-min/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-min/app/iphone-landscape.jpg" width="96%" height="100%" style="transform:translateX(30px);"></image>
<!-- Phone cover -->
<image xlink:href="src/img-min/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-min/app/macbook-screen2.jpg" height="80%" width="80%" style="transform:translate(96px, 40px);"></image>
<!-- Phone cover -->
<image xlink:href="src/img-min/app/device/macbook.png" height="100%" width="100%"></image>
</svg>
</figure>
Iphone x and Macbook
<div class="relative" style="padding-bottom:66%">
<!-- Macbook -->
<figure class="position-absolute top-0 end-0 w-100">
<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-min/app/macbook-screen2.jpg" height="80%" width="80%" style="transform:translate(96px, 40px);"></image>
<!-- Phone cover -->
<image xlink:href="src/img-min/app/device/macbook.png" height="100%" width="100%"></image>
</svg>
</figure>
<!-- Iphone potrait -->
<figure class="position-absolute start-0 bottom-1 w-25">
<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-min/app/iphone-potrait.jpg" height="92%" width="100%" style="transform:translateY(30px);"></image>
<!-- Phone cover -->
<image xlink:href="src/img-min/app/device/iphone-dark.png" height="100%" width="100%"></image>
</svg>
</figure>
</div>