# Image Layout

**URL:** https://community.glideapps.com/t/image-layout/68222
**Category:** Ask for Help
**Created:** [November 28, 2023, 11:24pm UTC](https://community.glideapps.com/t/image-layout/68222 "2023-11-28T23:24:36Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![Ryanb12](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ryanb12/32/64617_2.png) [@Ryanb12](https://community.glideapps.com/u/Ryanb12)
#### Post date: [November 28, 2023, 11:24pm UTC](https://community.glideapps.com/t/image-layout/68222/1 "2023-11-28T23:24:36Z")

</div>

Hi all, does anyone know how I can recreate this image layout? I have replicated the look in desktop view with a split container and 3 different image components. But when I click the mobile view it does not look very good (First image is large and there are two smaller images below…See attached).

Thank you in advance!

 ![Screenshot 2023-11-28 152316](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/7/e7a96bb8d009f71842489396fefd47629aba9be6.jpeg)  
 ![Screenshot 2023-11-28 152338](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/a/2a440755f439d00034150754b1bdc4ea9613a08b.jpeg)  
 ![Screenshot 2023-11-28 152359](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/b/0b4fdfeb77831f8a70b058ab36ad46d91953f91f.png)

---

<div class="post-metadata">

### Author: ![AdamMartin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adammartin/32/66650_2.png) [@AdamMartin](https://community.glideapps.com/u/AdamMartin)
#### Post date: [November 28, 2023, 11:53pm UTC](https://community.glideapps.com/t/image-layout/68222/2 "2023-11-28T23:53:40Z")

</div>

You can make use of the device screen size and then show and hide the container accordingly. So you would then have a layout specifically for mobile screens.

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [November 28, 2023, 11:59pm UTC](https://community.glideapps.com/t/image-layout/68222/3 "2023-11-28T23:59:00Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/e/8ee869d016b8a839c26c6333675175fec80885a2.png)

Here are some breakpoints by w3schools.

---

<div class="post-metadata">

### Author: ![Ryanb12](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ryanb12/32/64617_2.png) [@Ryanb12](https://community.glideapps.com/u/Ryanb12)
#### Post date: [November 29, 2023, 12:01am UTC](https://community.glideapps.com/t/image-layout/68222/4 "2023-11-29T00:01:41Z")

</div>

How would you go about setting this up? When I go to visibility settings I see the normal options. Can you point me in the right direction. It makes sense, just not seeing how I would accomplish this.

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [November 29, 2023, 12:04am UTC](https://community.glideapps.com/t/image-layout/68222/5 "2023-11-29T00:04:13Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/3/e385e03bc81756fd3a1adc5343b0855bdc187633.png)

You can have the screen width of the device using this.

---

<div class="post-metadata">

### Author: ![Ryanb12](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ryanb12/32/64617_2.png) [@Ryanb12](https://community.glideapps.com/u/Ryanb12)
#### Post date: [November 29, 2023, 12:07am UTC](https://community.glideapps.com/t/image-layout/68222/6 "2023-11-29T00:07:08Z")

</div>

Ahh ok! Got it, going to do this now! Thank you both!  
@AdamMartin