# Dope theme customize main page layout

**URL:** <https://forum.ghost.org/t/dope-theme-customize-main-page-layout/41604>\
**Category:** Themes\
**Created:** [October 2, 2023, 4:04pm UTC](https://forum.ghost.org/t/dope-theme-customize-main-page-layout/41604 "2023-10-02T16:04:03Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![tscibilia](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/tscibilia/32/26619_2.png) [@tscibilia](https://forum.ghost.org/u/tscibilia)\
**Post date:** [October 2, 2023, 4:04pm UTC](https://forum.ghost.org/t/dope-theme-customize-main-page-layout/41604/1 "2023-10-02T16:04:03Z")

</div>

I’m new to Ghost, I’m using the Dope theme and I’m trying to modify the layout of the main page to show 2 tags on devices with a screen width of 768, and 4 tags on a screen width of 1024. [I found this post](https://forum.ghost.org/t/dope-theme-main-page-doesnt-flex-grow-as-intended/24985/3), and tried editing the code for the file **`assets/js/main.js`** and using the command **`ghost restart`** afterward. However, it doesn’t seem to change the layout for me at all.

Any help would be greatly appreciated. Thanks!

Original code…

```auto
function tagFeed() {
    'use strict';
    var count = $('.tag-feed').attr('data-count');

    $('.tag-feed').owlCarousel({
        dots: false,
        nav: true,
        navText: [
            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="20" height="20" fill="currentColor"><path d="M26.667 14.667v2.667h-16l7.333 7.333-1.893 1.893-10.56-10.56 10.56-10.56 1.893 1.893-7.333 7.333h16z"></path></svg>',
            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="20" height="20" fill="currentColor"><path d="M5.333 14.667v2.667h16l-7.333 7.333 1.893 1.893 10.56-10.56-10.56-10.56-1.893 1.893 7.333 7.333h-16z"></path></svg>',
        ],
        responsive: {
            0: {
                items: 1,
                slideBy: 1
            },
            1024: {
                items: count > 1 ? 2 : count,
                slideBy: count
            },
            1920: {
                items: count > 2 ? 3 : count,
                slideBy: count
            },
            2560: {
                items: count > 3 ? 4 : count,
                slideBy: count
            },
        }
    });
}

```

My changes…

```auto
function tagFeed() {
    'use strict';
    var count = $('.tag-feed').attr('data-count');

    $('.tag-feed').owlCarousel({
        dots: false,
        nav: true,
        navText: [
            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="20" height="20" fill="currentColor"><path d="M26.667 14.667v2.667h-16l7.333 7.333-1.893 1.893-10.56-10.56 10.56-10.56 1.893 1.893-7.333 7.333h16z"></path></svg>',
            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="20" height="20" fill="currentColor"><path d="M5.333 14.667v2.667h16l-7.333 7.333 1.893 1.893 10.56-10.56-10.56-10.56-1.893 1.893 7.333 7.333h-16z"></path></svg>',
        ],
        responsive: {
            0: {
                items: 1,
                slideBy: 1
            },
            768: {
                items: count > 1 ? 2 : count,
                slideBy: count
            },
            1024: {
                items: count > 3 ? 4 : count,
                slideBy: count
            },
        }
    });
}

```

---

<div class="post-metadata">

**Author:** ![Spiritix](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/spiritix/32/26445_2.png) [@Spiritix](https://forum.ghost.org/u/Spiritix)\
**Post date:** [October 2, 2023, 5:20pm UTC](https://forum.ghost.org/t/dope-theme-customize-main-page-layout/41604/2 "2023-10-02T17:20:12Z")

</div>

The actual javascript used by the theme is the compiled one found in **assets/built/main.min.js**

Even if you change the source file **`assets/js/main.js`** it won’t automatically update the compiled file. To do that, you need to run a build command.

To run the build command:

- from the terminal, navigate to the theme folder
- run the command `npm install`
- run the command `npx gulp build`

Reload your browser and check the changes. You don’t need to restart Ghost.

* * *

Note: You only need to run `npm install` the first time, on subsequent changes you only need to run `npx gulp build`

---

<div class="post-metadata">

**Author:** ![tscibilia](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/tscibilia/32/26619_2.png) [@tscibilia](https://forum.ghost.org/u/tscibilia)\
**Post date:** [October 2, 2023, 5:39pm UTC](https://forum.ghost.org/t/dope-theme-customize-main-page-layout/41604/3 "2023-10-02T17:39:12Z")

</div>

Oh, I knew I was missing a step. Thanks, that worked!  
Much appreciated.