Custom CSS different on dekstop and mobile

support
1

I have tried to add custom colors for tags using this post:
https://meta.discourse.org/t/add-a-custom-fontawesome-icon-and-color-to-your-tag/67881!

This worked delicious for the desktop version, but not for the mobile version.
(the css script is in the common one)
Is there something extra I need to care for?

DekstopVsMobile

2

First, the second screenshot seems the “desktop view” on mobile to me.
Second, I’m not sure what code are you using but yes, CSS classes on mobile may be different from desktop.

4 Likes
3

I used Google Chrome Developer tools to simulate mobile version. This reflect exactly the same what i seeing on my mobile device.

My code in common css is:

@mixin fAwesome2 ($fa, $col) {
    &:link, &:visited, &.bullet::before {
        background-color: #33333F;
        color: $col;
    }
    &.bullet::before {
        content: $fa;
    }
}

[data-tag-name="bug"] { @include fAwesome2("\f135", #FF6448); }
[data-tag-name="feature"] { @include fAwesome2("\f135", #3CB371); }
[data-tag-name="quickwin"] { @include fAwesome2("\f135", #FFA500); }
[data-tag-name="declined"] { @include fAwesome2("\f135", #808080); }
[data-tag-name="question"] { @include fAwesome2("\f135", #1E90FF); }
[data-tag-name="urgent"] { @include fAwesome2("\f135", #EE82EF); }

How can i found out what i have to change to get to the same result on mobile and desktop version?

4

Ahhh, you are still using the old code before Introducing Font Awesome 5 and SVG icons. This explains everything.

You should use this instead https://meta.discourse.org/t/add-a-custom-fontawesome-icon-and-color-to-your-tag/67881/13

4 Likes
5

Well, i have read the post but for colors it looks to me there is no change, only for handling SVG Icons, right?

Meanwhile I have tried to analyze what is different on mobile and desktop and found out that on mobile version i have additionally the folowing code lines:

.topic-list .topic-item-stats .num .fa, .topic-list .topic-item-stats a, .topic-list .topic-item-stats a:visited {
    color: #919191;
}

This is hiding my custom color. If i disable this line in the designer it activate the script below and after that is shows correct also on mobile.

css
css715Ă—131 5.54 KB

How can it be removed or changed in an custom css?

6

Nope, even for colors. I think you have other customizations that interfere with the CSS of the tags.
Try only to add !important as in the code below:

@import "common/foundation/mixins";

[data-tag-name="tag1"]:link,
[data-tag-name="tag1"]:visited,
[data-tag-name="tag1"].bullet:before {
    color: red !important;
}
1 Like
7

I’m using v2.2.0.beta6 +84 without any other customizations. Adding !important fixed it! Thanks for your help and merry christmas.

4 Likes
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.