# How to See a Preview of the Site Layout in Different Devices?

To see a preview of the site layout in different devices, you must do the following steps.

1. Go to the Advanced Editor page.
2. There are 2 different ways to view the site layout on different devices. You can use the device icons on the upper-left corner of the page or you can also go to the "PREVIEW MODE".
3. To use the device icons, just click the device icon you want to view the site layout with and it will show you the preview instantly. See the images below.

<figure><img src="https://813547763-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiPhRDfcPxcS1rIzvmNHd%2Fuploads%2FfDXW0mGEJ1JnCpxdWopj%2Fimage.png?alt=media&#x26;token=6e6ae987-c1e6-4dd7-a7ca-29b9ed300959" alt=""><figcaption><p>Large desktop view</p></figcaption></figure>

<figure><img src="https://813547763-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiPhRDfcPxcS1rIzvmNHd%2Fuploads%2FxTMuncpBsQjECxe3ygmx%2Fimage.png?alt=media&#x26;token=d5f462f7-5a10-4ecc-8c6b-67ba454cb0ee" alt=""><figcaption><p>Small desktop/tablet view</p></figcaption></figure>

<figure><img src="https://813547763-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiPhRDfcPxcS1rIzvmNHd%2Fuploads%2FuciZK3HFsT8cx1PClau2%2Fimage.png?alt=media&#x26;token=fd784dc8-8314-4876-8789-e67a1d7c690a" alt=""><figcaption><p>Mobile device view</p></figcaption></figure>

4. To go to the **"PREVIEW MODE"**, simply click the **"Preview"** button on the upper-right corner just beside the "Republish" button.

<figure><img src="https://813547763-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiPhRDfcPxcS1rIzvmNHd%2Fuploads%2FePlHJsaIad3hAiPlsJss%2Fimage.png?alt=media&#x26;token=eeae054e-96b4-4587-9093-e4056e6f2a75" alt=""><figcaption></figcaption></figure>

5. You will notice that there are additional icons that can now be seen on the upper-left corner. You now have the **"View your site on all screens"**  icon which shows the layout on all 3 devices simultaneously (see Image 1) and the **"Zoom drop-down"** which allows you to zoom out the preview to either 100% (normal view) or 50% to see your design as a whole (see Image 2). Also, when you click the "Mobile device" icon, there 3 more additional icons added: ***Apple icon, Android icon*** and the ***Rotate preview icon*** which shows the rotated preview of the website on mobile devices. *(*&#x53;ee Images 3,4 & 5 below)

<figure><img src="https://813547763-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiPhRDfcPxcS1rIzvmNHd%2Fuploads%2F0w0mZaTrxJ0qTgPLHsQK%2Fimage.png?alt=media&#x26;token=ec66bff1-2b74-42fc-8af5-90f61b06e1f7" alt=""><figcaption><p>Image 1. View your site on all screens preview</p></figcaption></figure>

<figure><img src="https://813547763-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiPhRDfcPxcS1rIzvmNHd%2Fuploads%2FwSwem378zogAIo1v6Thr%2Fimage.png?alt=media&#x26;token=03c6179d-4dbf-4938-8d04-504b1ed1754b" alt=""><figcaption><p>Image 2. Previews zoomed at 100% and 50 %</p></figcaption></figure>

<figure><img src="https://813547763-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiPhRDfcPxcS1rIzvmNHd%2Fuploads%2Fpk4f7ilcy9pgB2JGf9W0%2Fimage.png?alt=media&#x26;token=d826e7a8-bf27-43d1-ad9b-f92a45f1adfb" alt=""><figcaption><p>Image 3. Added icons under Mobile devices</p></figcaption></figure>

<figure><img src="https://813547763-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiPhRDfcPxcS1rIzvmNHd%2Fuploads%2FNt02ynEvE09gdum1y35b%2Fimage.png?alt=media&#x26;token=53f0402e-14d0-40d4-afb1-00e918eec545" alt=""><figcaption><p>Image 4. Apple vs Android view</p></figcaption></figure>

<figure><img src="https://813547763-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiPhRDfcPxcS1rIzvmNHd%2Fuploads%2FsULkLBVgfNWIgZzovqVB%2Fimage.png?alt=media&#x26;token=ecc911e2-b72b-45be-afaa-ea36c722623e" alt=""><figcaption><p>Image 5. Apple vs Android (Rotated view)</p></figcaption></figure>
