We can help you solve company communication.
Easily wrap your screenshots in iPhone X or Macbook device frames or create combos of both. iPhone X screenshot should be 720 x 450px or of the same ratio. Macbook screenshot should be 500 x 1080px or of the same ratio.
<!-- iPhone -->
<div class="device device-iphonex">
<img src="assets/img/screenshots/mobile/jobs.jpg" class="device-screen" alt="...">
<img src="assets/img/devices/iphonex.svg" class="img-fluid" alt="...">
</div>
<!-- Macbook -->
<div class="device device-macbook">
<img src="assets/img/screenshots/desktop/jobs.jpg" class="device-screen" alt="...">
<img src="assets/img/devices/macbook.svg" class="img-fluid" alt="...">
</div>
Three options to combine devices are available.
<!-- Macbook + iPhone -->
<div class="device-combo device-combo-macbook-iphonex">
<!-- iPhone -->
<div class="device device-iphonex">
<img src="assets/img/screenshots/mobile/jobs.jpg" class="device-screen" alt="...">
<img src="assets/img/devices/iphonex.svg" class="img-fluid" alt="...">
</div>
<!-- Macbook -->
<div class="device device-macbook">
<img src="assets/img/screenshots/desktop/jobs.jpg" class="device-screen" alt="...">
<img src="assets/img/devices/macbook.svg" class="img-fluid" alt="...">
</div>
</div>
<!-- iPhone + iPhone -->
<div class="device-combo device-combo-iphonex-iphonex">
<!-- iPhone -->
<div class="device device-iphonex">
<img src="assets/img/screenshots/mobile/jobs.jpg" class="device-screen" alt="...">
<img src="assets/img/devices/iphonex.svg" class="img-fluid" alt="...">
</div>
<!-- iPhone -->
<div class="device device-iphonex">
<img src="assets/img/screenshots/mobile/jobs.jpg" class="device-screen" alt="...">
<img src="assets/img/devices/iphonex.svg" class="img-fluid" alt="...">
</div>
</div>
<!-- iPhone + Macbook -->
<div class="device-combo device-combo-iphonex-macbook">
<!-- iPhone -->
<div class="device device-iphonex">
<img src="assets/img/screenshots/mobile/jobs.jpg" class="device-screen" alt="...">
<img src="assets/img/devices/iphonex.svg" class="img-fluid" alt="...">
</div>
<!-- Macbook -->
<div class="device device-macbook">
<img src="assets/img/screenshots/desktop/jobs.jpg" class="device-screen" alt="...">
<img src="assets/img/devices/macbook.svg" class="img-fluid" alt="...">
</div>
</div>