# Material Design on Mobile

**URL:** <https://meta.discourse.org/t/material-design-on-mobile/60199>\
**Category:** Product Support\
**Created:** [30 Marzo 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:** 1

<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:** [30 Marzo 2017, 11:51pm UTC](https://meta.discourse.org/t/material-design-on-mobile/60199/1 "2017-03-30T23:51:21Z")

</div>

Currently attempting to add @rewphus’s excellent material design CSS to one of my sites. After some small modifications, everything is working great except one issue on mobile.

Here’s a screenshot of the issue. Notice the double shadow between the list of subcategories and the “category summary”:

 ![](https://global.discourse-cdn.com/meta/original/3X/1/5/1583c63ca5b6eef131985c8fec97f71d5e0bc01e.png)

Here’s the current mobile CSS. The first block is intended to target the topic views (latest, new, unread) and category boxes (thanks Neil!), while the second block targets the category page. Problem is, there is a `topic-list` class inside the `category-list-item`, and that is the same class I need to target for the topic views. I can’t figure out how to tell the first block not to target the category page, as all the pages appear to share parent classes and ids (`container`, `full-width`, `list-area`, `contents`). Is there a way to handle this via CSS, or does there need to be new classes added to the mobile HTML?

```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;
}

```

---

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