# How to set Half on Desktop and Full on Mobile

**URL:** <https://community.elfsight.com/t/how-to-set-half-on-desktop-and-full-on-mobile/140534>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [October 12, 2025, 7:56am UTC](https://community.elfsight.com/t/how-to-set-half-on-desktop-and-full-on-mobile/140534 "2025-10-12T07:56:18Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [October 12, 2025, 7:56am UTC](https://community.elfsight.com/t/how-to-set-half-on-desktop-and-full-on-mobile/140534/1 "2025-10-12T07:56:18Z")

</div>

To set Half on Desktop

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/2/7/27c83859e7717b7d5f36bbfe145069217e494c0c.png)

and Full layout on Mobile.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/a/a/aa0a5c2c9a40e5f0238e0c724eca4e2653e99a29.png)

**#1.** First, edit **Product** \> Choose **Half layout**

[![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/2/7/27c83859e7717b7d5f36bbfe145069217e494c0c.png)](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/2/7/27c83859e7717b7d5f36bbfe145069217e494c0c.png "image")

**#2.** Next, click on **Gear icon** on Store Page

[![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/b/7/b796638d605355eceb63fc649c7aaa1caaf8083e.png)](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/b/7/b796638d605355eceb63fc649c7aaa1caaf8083e.png "image")

**#3.** Click **Advanced** \> Page **Header Code Injection**

[![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/9/6/967ef1a125d4461f6d340036970de37b315863e6.png)](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/9/6/967ef1a125d4461f6d340036970de37b315863e6.png "image")

**#4.** Next, use this code to right box

```auto
<script>
function changeLayoutOnMobile() {
  if (window.innerWidth <= 768) {
    const productElement = document.querySelector('[data-product-detail-layout="half"]');
    if (productElement) {
      productElement.setAttribute('data-product-detail-layout', 'full');
    }
  }
}

document.addEventListener('DOMContentLoaded', changeLayoutOnMobile);
window.addEventListener('resize', changeLayoutOnMobile);
</script>

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/e/1/e13c6ea52ab7850d9aab109fc1a50ce40d33d1e2.png)