We created a custom Mobile Phone container to show case your content. Hover over and scroll to see the full effect.
The fake mobile phone is built using an Elemntor column with a background color, border radius and some percentage padding. Do not adjust any of these settings or add margins or other styles aside from the colors maybe.
The rest of this is created using a little CSS and changing settings in Elementor may break this look.
Simply edit the Image Widget in the Column to the left and replace it with your own image and select Image size: Full.
- Open your chosen website in Chrome
- Open the Dev Tools with Right Click > Inspect
- Select the Responsive view ( mobile icon)
- Set Responsive view to iPhone X (375px wide)
- Select the Dev Tools Window and press: CTRL + SHIFT + P (WIN) or CMD + SHIFT + P (MAC)
- In the field provided type FULL SCREEN CAPTURE
- Hit return and your image is downloaded
- Optimize your image using your favorite app