# Material Design on Mobile

**URL:** <https://meta.discourse.org/t/material-design-on-mobile/60199>\
**Category:** Support\
**Created:** [30. März 2017 um 23:51 UTC](https://meta.discourse.org/t/material-design-on-mobile/60199 "2017-03-30T23:51:21Z")\
**Posts on this page:** 3\
**Page:** 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. März 2017 um 23:51 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;
}

```

---

<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:** [1. April 2017 um 07:01 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;
    }
}

```

---

<div class="post-metadata">

**Author:** ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)\
**Post date:** [8. Juni 2024 um 12:44 UTC](https://meta.discourse.org/t/material-design-on-mobile/60199/3 "2024-06-08T12:44:51Z")

</div>

Dieses Thema wurde nach 2626 Tagen automatisch geschlossen. Neue Antworten sind nicht mehr erlaubt.