Merge pull request #3998 from braze-inc/BD-1562

BD-1562: Update IAM creative details and templates

_docs/_user_guide/message_building_by_channel/in-app_messages/creative_details/fullscreen.md

@@ -15,7 +15,18 @@ tool:
 
 Full-screen messages take up the whole screen of the device! This message type is great when you really need your user's attention, like for mandatory app updates.
 
-![Two full-screen in-app messages side-by-side, detailing the image and text recommendations. See following sections for details.][3a]{: style="max-width: 801px; border: none;"}
+{% tabs %}
+{% tab Portrait %}
+
+![Two full-screen in-app messages side-by-side in portrait orientation, detailing the image and text recommendations. See following sections for details.]({% image_buster /assets/img/full-screen-spec.png %}){: style="max-width:801px;border:none;display:block;margin-left:auto;margin-right:auto"}
+
+{% endtab %}
+{% tab Landscape %}
+
+![Two full-screen in-app messages side-by-side in landscape orientation, detailing the image and text recommendations. See following sections for details.]({% image_buster /assets/img/full-screen-spec-landscape.png %}){: style="max-width:801px;border:none;display:block;margin-left:auto;margin-right:auto"}
+
+{% endtab %}
+{% endtabs %}
 
 ## Images
 
@@ -31,16 +42,16 @@ Full-screen in-app messages will fill the entire height of a device and crop hor
 
 | layout | asset size | notes |
 |--- | --- | --- |
-| Image + Text | 6:5 aspect ratio<br>Hi-Res 1200 x 1000px<br> Min. 600 x 500px | Cropping can occur on all sides, but the image will always fill the top 50% of the viewport |
-| Image Only | 3:5 aspect ratio<br>Hi-Res 1200 x 2000px<br> Min. 600 x 1000px | Cropping can occur on the left and right edges on taller devices |
+| Image and text | 6:5 aspect ratio<br> Hi-Res 1200 x 1000px<br> Min. 600 x 500px | Cropping can occur on all sides, but the image will always fill the top 50% of the viewport |
+| Image only | 3:5 aspect ratio<br> Hi-Res 1200 x 2000px<br> Min. 600 x 1000px | Cropping can occur on the left and right edges on taller devices |
 {: .reset-td-br-1 .reset-td-br-2 .reset-td-br-3}
 
 #### Landscape
 
 | layout | asset size | notes |
 |--- | --- | --- |
-| Image + Text | 10:3 aspect ratio<br>Hi-Res 2000 x 600px<br> Min. 1000 x 300px | Cropping can occur on all sides, but the image will always fill the top 50% of the viewport |
-| Image Only | 5:3 aspect ratio<br>Hi-Res 2000 x 1200px<br> Min. 1000 x 600px | Cropping can occur on the left and right edges on taller devices |
+| Image and text | 10:3 aspect ratio<br> Hi-Res 2000 x 600px<br> Min. 1000 x 300px | Cropping can occur on all sides, but the image will always fill the top 50% of the viewport |
+| Image only | 5:3 aspect ratio<br> Hi-Res 2000 x 1200px<br> Min. 1000 x 600px | Cropping can occur on the left and right edges on taller devices |
 {: .reset-td-br-1 .reset-td-br-2 .reset-td-br-3}
 
 ### Image safe zone
@@ -53,8 +64,18 @@ When previewing a full-screen in-app message in the Braze platform, you can enab
 
 On a tablet or desktop browser, a full-screen in-app message will sit in the center of the app screen, as shown in the following screenshot.
 
-![Full-screen in-app message as it would appear on a large screen. The message appears as a large modal that sits in the center of the screen.][3b]{: style="max-width: 800px; border: none;"}
+{% tabs %}
+{% tab Portrait %}
+
+![Full-screen in-app message as it would appear on a large screen in portrait orientation. The message appears as a large modal that sits in the center of the screen.]({% image_buster /assets/img/full-screen-large-viewport.png %}){: style="border:none;display:block;margin-left:auto;margin-right:auto"}
+
+{% endtab %}
+{% tab Landscape %}
+
+![Full-screen in-app message as it would appear on a large screen in landscape orientation. The message appears as a large modal that sits in the center of the screen.]({% image_buster /assets/img/full-screen-large-viewport-landscape.png %}){: style="max-width:80%;border:none;display:block;margin-left:auto;margin-right:auto"}
+
+{% endtab %}
+{% endtabs %}
 
-[3a]: {% image_buster /assets/img/full-screen-spec.png %}
 [3b]: {% image_buster /assets/img/full-screen-large-viewport.png %}
 [3c]: {% image_buster /assets/img/image-safe-zone-full-screen-in-app-message.png %}