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="position-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="position-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="position-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="position-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="position-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="position-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="position-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="735" 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(94px, 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="position-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="735" 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(94px, 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>

Iphone x Potrait

            
              <div class="position-relative my-6 my-md-5" style="padding-bottom: 120%">
                <figure class="position-absolute start-0 top-0 w-75 ms-n5" data-aos="fade-left">
                  <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="52" y="10" width="380" height="818"/>
                      </clipPath>
                    </defs>
                    <!-- Phone screen -->
                    <image clip-path="url(#svgf)" xlink:href="src/img-min/app/app3.jpg" height="92%" width="100%" style="transform:translateY(24px);"></image>
                    <!-- Phone cover -->
                    <image xlink:href="src/img-min/app/device/iphone-dark.png" height="100%" width="100%"></image>
                  </svg>
                </figure>

                <figure class="position-absolute end-0 w-75" style="top:12%" data-aos="fade-left" data-aos-delay="200">
                  <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480.000000 906.000000">
                    <!-- Clip path image -->
                    <defs>
                      <clipPath id="svgf1">
                        <rect x="52" y="10" width="380" height="818"/>
                      </clipPath>
                    </defs>
                    <!-- Phone screen -->
                    <image clip-path="url(#svgf1)" xlink:href="src/img-min/app/app1.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>

Iphone X Landscape

            
              <div class="position-relative my-6 my-md-5" style="padding-bottom: 50%">
                <!-- Iphone landscape -->
                <figure class="position-absolute start-0 top-0 w-75" data-aos="fade-left">
                  <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 906.000000 480.000000">
                    <!-- Clip path image -->
                    <defs>
                      <clipPath id="svgf55">
                        <rect y="52" x="18" height="380" width="818"/>
                      </clipPath>
                    </defs>
                    <!-- Phone screen -->
                    <image clip-path="url(#svgf55)" 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 landscape -->
                <figure class="position-absolute end-0 w-75" style="top:20%" data-aos="fade-left" data-aos-delay="200">
                  <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 906.000000 480.000000">
                    <!-- Clip path image -->
                    <defs>
                      <clipPath id="svgf56">
                        <rect y="52" x="18" height="380" width="818"/>
                      </clipPath>
                    </defs>
                    <!-- Phone screen -->
                    <image clip-path="url(#svgf56)" 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>
              </div>