[belayachimarouaneParticipant]

Hello,

my x-brand div (the one where there is the logo text) is not showing on firefox. I have applied certain style but don’t know how to reset them on firefox ?

I have tried firefox selectors on Css but no success.

Thank you very much

[belayachimarouaneParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Thanks for posting in.

It’s this custom CSS,

.x-brand {
    font-size: 8rem;
    font-weight: 500;
    text-align: center;
    background: -webkit-linear-gradient(left, #33235B, #58e87a, #32b651, #792042, #33235B);
    background: linear-gradient(left, #32b651, #D62229, #E97639, #792042, #33235B);
    background-size: 3200px 200px;
    color: transparent;
    font-size: 36px;
    -webkit-background-clip: text;
    -webkit-animation: animate-logo;
    -webkit-animation-delay: 0;
    -webkit-animation-duration: 7s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-fill-mode: forwards;
    @include single-transition($property: font-size, $speed: 500ms, $ease: ease-in-out);
}

You can remove that whole CSS or just the color styling.

Cheers!

[belayachimarouaneParticipant]

Is there anyway to remove the color styling for only firefox ?

Thank you

[RupokMember]

Hi there,

Thanks for updating. You can try setting different color styling for Firefox :

@-moz-document url-prefix() { 

.x-brand {
    background: transparent;
}

}

Write you own CSS within the document query.

Cheers!

[belayachimarouaneParticipant]

Hello! Thanks for the fast reply.

It didn’t work although I have already tried multiple attempts like this!

What do you mean by writing my own css in the jquery document ?

Thank you

[Rue NelModerator]

Hello There,

This particular code in your customizer > CSS is not a valid CSS code.

@function lower-bound($range){
  @if length($range) <= 0 {
    @return 0;
  }
  @return nth($range,1);
}

@function upper-bound($range) {
  @if length($range) < 2 {
    @return 999999999999;
  }
  @return nth($range, 2);
}

$small-range: (0em, 40em);
$medium-range: (40.063em, 64em);
$large-range: (64.063em, 90em);
$xlarge-range: (90.063em, 120em);
$xxlarge-range: (120.063em, 99999999em);

$screen: "only screen";
$small-up: $screen;
$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";

@mixin single-transition($property:all, $speed:300ms, $ease:ease-out) {
  transition: $property $speed $ease;
}

This is a SASS (http://sass-lang.com/guide) code and needs to be converted to a valid css code before it will work. Please have it removed because it affects the rest of your entire code in your customizer, Appearance > Customize > Custom > CSS.

Hope this helps.

[belayachimarouaneParticipant]

Hello, Thanks for the amazing support!

I have removed it. Luckily the logo didn’t change. (I need it to be animated like that.)
However the problem persists with Firefox!

Weird

[belayachimarouaneParticipant]

Solved!

Thanks a lot for your help guys.

Cheers

[JadeModerator]

Glad to hear that. You’re most welcome. 🙂
.

[Author]

Posts