Advanced Menu - Darstellungsfehler in Firefox

Hallo zusammen,

habe einen Darstellungsfehler des Advanced Menus in Firefox, da wird der Kategorie-Text einer Kategorie auf zwei oder mehr Spalten aufgeteilt, während es im Chrome einwandfrei läuft.

dev.schwarzwald-maria.de

Hier der verwendete Code:

// Advanced menu container that contains every category listing
@adv-menu-header-bg: #8a4631; //Hover
@adv-menu-header-text-color: #ff5050;//Hover Textfarbe
@adv-menu-bg: #F3E2A9;//Rand Aufklappmenu Aufklappmenu
@adv-menu-text-color: #FA58F4;
@adv-menu-link-color: #333333;//Textfarbe Kategorielinks
@adv-menu-link-hover-color: #F01F1F;
@adv-menu-delimiter: #a9945d;
@adv-menu-teaser-link-color: #111111;
@adv-menu-teaser-link-hover-color: #ff5050;

.advanced-menu {
    .unitize-max-width(1890, 30);
}

.advanced-menu .menu--list-item {
  text-align: center;
}

.advanced-menu .menu--teaser {
  display: none;
}

.advanced-menu .teaser--image {
  display: none;
}

.advanced-menu .button-container {
  display: none;
}

// Hintergrund Aufklappmenu
.advanced-menu .content--wrapper {
        .unitize-margin(0, 30);
        background-color: #F3E2A9;
    }

//Spaltenanzahl verändern
.advanced-menu .menu--level-0 {
    .unitize-padding(10, 10, 0, 10);
    float: left;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;

    &.columns--1 {
        .column-count(1);
    }
    &.columns--2 {
        .column-count(2);
    }
    &.columns--3 {
        .column-count(3);
    }
    &.columns--4 {
        .column-count(6);
    }
}

//Aufklappmenu Abstand nach unten
.advanced-menu .item--level-0 {
    .unitize(padding-bottom, 10);
    .menu--list-item-link {
      font-size: 14px;
    }
  }

.advanced-menu .item-level-1 {
    .unitize(padding-bottom, 10);
    .menu--list-item-link {
      font-size: 13px;
    }
}


//Abstände Aufklappmenu Desktop
@media screen and (min-width: @desktopViewportWidth) {
    .advanced-menu .content--wrapper {
        .unitize-margin(0, 40);
    }

    //Schriftgrößen Aufklappmenu
    .advanced-menu .item--level-0 {
        .menu--list-item-link {
          font-size: 18px;
        }
      }

    .advanced-menu .item-level-1 {
        .menu--list-item-link {
          font-size: 16px;
          font-weight: normal;
        }
    }
}

Beste Grüße aus dem Schwarzwald
Thomas Knab

Schick mal Screenshot, was Du genau meinst…

 

 

 

Du musst Platz schaffen, die Kategorienamen sind zu lange bzw. der Font ist zu groß. Mit font-size: 14px würde es schon mal nicht umbrechen,aber ich denke Du willst es so groß haben, oder?

display: inline-block;

Könnte helfen…

 

Probier das mal…

Du bisch de Bescht. Häsch Dir bald en Schinke verdient :wink:

Ja, nur her damit…, leckääää!

Speck oder Schinken?
team@scharzwald-maria.de

Du hattest ja gesagt, dass Du die Schriftgröße sehr groß findest.

Ich finde auch, dass es im Firefox zu groß ist, komischerweise aber unterschiedlich zum Chrome.