# Material Design on Mobile

**URL:** <https://meta.discourse.org/t/material-design-on-mobile/60199>\
**Category:** Product Support\
**Created:** [March 30, 2017, 11:51pm UTC](https://meta.discourse.org/t/material-design-on-mobile/60199 "2017-03-30T23:51:21Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![jomaxro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jomaxro/32/126216_2.png) [@jomaxro](https://meta.discourse.org/u/jomaxro)\
**Post date:** [April 1, 2017, 7:01am UTC](https://meta.discourse.org/t/material-design-on-mobile/60199/2 "2017-04-01T07:01:04Z")

</div>

Figured it out. Not the cleanest solution (requires repeating rules), but it works. Ended up leaving the `.topic-list` declaration as it is and targeting `.topic-list` within `.category-list-item` using `none` properties.

```plaintext
//add shadow behind the list of topics
.topic-list, .category-box{
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    background-color: lighten($secondary, 10%);
    border-collapse: collapse;
}

.category-list-item {
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    background-color: lighten($secondary, 10%);
    border-collapse: collapse;
    margin-bottom: 20px;
    .topic-list {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
}

```

---

_[View the full topic](https://meta.discourse.org/t/material-design-on-mobile/60199)._