Can't remove topic footer buttons on iOS

[CaptainJ]

I’ve managed to remove the Flag and Share buttons from the bottom of topics on desktop, but in the iOS app there’s still a “Topic Controls” dropdown containing Flag and Share. I did the CSS in the “Common” section.

Is this a bug?

(The topic footer buttons are especially cluttered on mobile screens, so having an unnecessary big “Topic Controls” button is a bit annoying, especially as I don’t think there’s a way to remove “Bookmark” either which is another big button. If these were just icons, it wouldn’t be so bad, but currently nearly half the screen at the end of the topic is buttons.)

[awesomerobot (Kris)]

can you share your relevant CSS here? it’s likely you need to be more specific for it to apply to mobile

[CaptainJ]

button#topic-footer-button-flag {
    display: none;
}

button#topic-footer-button-share-and-invite {
    display: none;
}

I also removed pinned and the notifications text:

#topic-footer-buttons .pinned-button {
    display: none;
}


#topic-footer-buttons {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    
    button.create { order: -1; }
    
    .topic-notifications-button {
        margin-block: 0;
        
        .reason  {
            margin-top: 0;
            
            .text {
                display: none;
            }
        }
    }
}

@media screen and (max-width: 924px) {
    html.desktop-view #topic-footer-buttons .topic-notifications-button {
        margin-top: 1em;
    }
}

Thanks!

[awesomerobot (Kris)]

yeah, so on mobile the topic footer controls are an entirely separate component so your CSS is a little too specific and only applies to desktop…

This should work for both:

#topic-footer-buttons {
  .flag-topic, 
  .share-and-invite {
    display: none;
  }
}

We’ve got a little tutorial on checking for CSS selectors: Make CSS changes on Your Site

Mobile can be a little tricky to check if you don’t have a development environment set up, but if you add ?mobile_view=1 to the end of your forum’s URL this allows you to view mobile on a desktop, which can make it easier to work with.

[CaptainJ]

Thanks! I didn’t know about ?mobile_view=1

Btw I also had to add the following to get rid of the (now empty) dropdown:

#topic-footer-buttons .topic-footer-mobile-dropdown {
  display: none;
}