[gelöst] Mobile-Portrait zu breit: grauer Rand rechts

Shopware 5 Themes & Design
1

Hi,

der Cookie-Hinweis (Shopware 5.6.6. und vorher) ist in der mobilen Ansicht im Hochformat zu breit. Hat jmd. einen Hinweis, wo ich das anpassen könnte oder zumindest einen Stoß in die richtige Richtung? :slight_smile:

Edit: Liegt wohl nicht am Cookie-Hinweis, wenn ich den abschalte, ist die Seite immer noch gleich breit (der Hinweis passt sich wohl im Gegensatz zum Rest an). Idee?

LG Heiko

1080×686 141 KB

2

Es lag an einer ziemlichen alten header.less und die dort enthaltenen Logo-Einstellungen:

alt - Mobile Portait zu breit:

// Logo Desktop
.header-main {
 
.logo-main {
 
.logo--link {
.unitize-height(150); // Anpassen der Höhe, Angabe in px
.unitize-width(750); // Anpassen der Breite, Angabe in px
}
 
.logo--shop {
.unitize-height(150); // Anpassen der Höhe, Angabe in px
.unitize-width(750); // Anpassen der Breite, Angabe in px
}
}
}
 
// Logo Smartphone
@media only screen and (max-width: 736px) {
.header-main {
 
.logo-main {
 
.logo--link {
.unitize-height(115); // Anpassen der Höhe, Angabe in px
}
 
.logo--shop {
.unitize-height(115); // Anpassen der Höhe, Angabe in px
}
}
}
}

Neu - alles passt:

.header-main {
  // Logo
  .logo-main {
    // Smaller logo for mobile viewports
    .logo--shop {
      .unitize-height(115, 16);
        .unitize-width(400); // Anpassen der Breite, Angabe in px
    }
    .logo--link {
      .unitize-height(115, 16);
        .unitize-width(400); // Anpassen der Breite, Angabe in px
    }
  }
}
@media screen and (min-width: @tabletViewportWidth) {
  .header-main {
    // Logo
    .logo-main {
      // Bigger logo for tablet viewports
      .logo--shop {
        .unitize-height(150, 16);
        .unitize-width(750); // Anpassen der Breite, Angabe in px
      }
      .logo--link {
        .unitize-height(150, 16);
        .unitize-width(750); // Anpassen der Breite, Angabe in px
      }
    }
  }
}