# Smart Rules for Images by Device Type

**URL:** <https://community.hubspot.com/t/smart-rules-for-images-by-device-type/108995>\
**Category:** Blog, Website & Page Publishing\
**Tags:** website-pages\
**Created:** [June 9, 2024, 5:29pm UTC](https://community.hubspot.com/t/smart-rules-for-images-by-device-type/108995 "2024-06-09T17:29:40Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![CRichardson41](https://avatars.discourse-cdn.com/v4/letter/c/c6cbf5/32.png) [@CRichardson41](https://community.hubspot.com/u/CRichardson41)\
**Post date:** [June 9, 2024, 5:29pm UTC](https://community.hubspot.com/t/smart-rules-for-images-by-device-type/108995/1 "2024-06-09T17:29:40Z")

</div>

In the CMS editor I have inserted two images and attaches a smart rule for one as desktop and one as mobile. When I preview, both images are still showing on both device type previews. Any suggestions on what I am doing wrong?

---

<div class="post-metadata">

**Author:** ![jnix284](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jnix284/32/29_2.png) [@jnix284](https://community.hubspot.com/u/jnix284)\
**Post date:** [June 9, 2024, 11:51pm UTC](https://community.hubspot.com/t/smart-rules-for-images-by-device-type/108995/2 "2024-06-09T23:51:35Z")

</div>

Hi @CRichardson41 can you please share screenshots of how you have the smart rule configured and how you’ve added the images to the module - as well as what the preview looks like, where you’re previewing, etc.

---

<div class="post-metadata">

**Author:** ![CRichardson41](https://avatars.discourse-cdn.com/v4/letter/c/c6cbf5/32.png) [@CRichardson41](https://community.hubspot.com/u/CRichardson41)\
**Post date:** [June 9, 2024, 11:56pm UTC](https://community.hubspot.com/t/smart-rules-for-images-by-device-type/108995/3 "2024-06-09T23:56:59Z")

</div>

![CRichardson41_0-1717977288834.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/1/8/189593409dd9318f96049c8fb07548f2444bab20.png)

 ![CRichardson41_1-1717977313460.png](https://d2qpr2jzcazej7.cloudfront.net/original/1X/a28aa7880e73eae5196f11cb65e4c8938e77f8d6.png)

 ![CRichardson41_2-1717977385620.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/b/2/b25fe4317cb4e8706cf8ea1c958678434f236c63.jpeg)

Thanks fo your help. Mobile rule, desktop rule and preview of site attached

---

<div class="post-metadata">

**Author:** ![jnix284](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jnix284/32/29_2.png) [@jnix284](https://community.hubspot.com/u/jnix284)\
**Post date:** [June 13, 2024, 12:00pm UTC](https://community.hubspot.com/t/smart-rules-for-images-by-device-type/108995/4 "2024-06-13T12:00:28Z")

</div>

Hi @CRichardson41 thanks for the screenshots - it looks like you have the image module on the page twice with two separate sets of smart rules.

You’d need to have one image module, with two smart rules:

default

mobile

(tablet only if you have a 3rd image)

Once you have the smart rules, the image you load in the module for default is for desktop/tablet and when you switch the smart rule to mobile then you load the mobile image. This is how you control which shows based on the device, otherwise both will show.