Element Hidden on Desktop, Not on Mobile?

BrodyStone21

I'm trying to hide an element. Here is a screenshot of the inspect screen.

I have managed to get this hidden on desktop, so I don't understand why it's visible on mobile? I'm not very good at CSS, so that's probably the issue.

.ParentCategory.TagCategory-alignEnd { display: none !important; }

Note that I am only trying to hide the alignEnd section for the parent category, not the child categories.

User31

Last week I figured out that any time we want to target something on mobile & tablet views, we can just slap the old: @media @phone { } around the intended code.

I'm not exactly sure how this works, or if it's the correct way, but so far it seems to be working in each case I've used it.

BrodyStone21

User31
You're correct, if I'm looking to specifically target a phone, like this:

.TagCategory-subTagList { padding-inline-start: 20px !important; }
@media @phone { .TagCategory-subTagList { padding-inline-start: 0px !important; } }

However, in this case, I'm targeting the element on everything, so there is no need to specifically target the phone.

.ParentCategory.TagCategory-alignEnd { display: none !important; }
@media @phone { .ParentCategory.TagCategory-alignEnd { display: none !important; } }

I could be wrong about this, but that is what I have gathered so far.

User31

BrodyStone21

Yeah I actually resorted to making duplicates of whichever codes I wanted to target on all devices.
One for the desktop views and one for the mobile views.

For example, something like this:

//TARGETING DESKTOP//
.ParentCategory.TagCategory-alignEnd { 
        display: none !important;
}

//TARGETING MOBILE//
@media @phone { 
       .ParentCategory.TagCategory-alignEnd {
                 display: none !important;
      }
}

Although again, I really don't know if this is the right way to do it.