Header und Logo Größe für Desktop/Tablet/Phone

Shopware 5 Themes & Design
1

Ich brauche mal Hilfe und am besten eine Grundsatzerklärung für die Header.less :sunglasses: Hier mal meine eigene header.less im eigenen Theme. Wenn ich nur den 1. Codeblock reinnehme, dann bekomme ich problemlos die Desktop Anpassung für das Logo hin. Nun möchte ich aber für “Phone” ein kleineres Logo einsetzen und für “Tablet” das Desktop Logo verkleinern. Dazu habe ich den 2. Codeblock aus der original Header.less rauskopiert. Aber egal was ich mache, entweder wird es überall kleiner :sunglasses: oder im “Phone” ist alles zu groß… Ich verstehe die Systematik einfach nicht… OriginalLogoGröße ist 345 x 180px Ist hier anzusehen: http://www.mydog-shop.de/ .header-main { // Logo .logo-main { .unitize-padding(10, 10 ,0 ,0); .logo--link { .unitize-height(160, 16); } // Smaller logo for mobile viewports .logo--shop { .unitize-height(160, 16); // Anpassen der Höhe, Angabe in px //width: 75%; } } } .shop--navigation { //width: 50%; .unitize(padding-top, 30); } // Phone Landscape styling for the global shop header @media screen and (min-width: @phoneLandscapeViewportWidth) { .header-main { .logo-main { .unitize-padding(10, 10, 0, 10); width: 35%; .logo--link { .unitize-height(50, 16); } // Larger logo for tablet & desktop viewports .logo--shop { .unitize-height(50, 16); width: 82% } } } } // Tablet styling for the global shop header @media screen and (min-width: @tabletViewportWidth) { .header-main { .logo-main { .unitize-padding(10, 10, 0, 10); width: 35%; .logo--link { .unitize-height(160, 16); } // Larger logo for tablet & desktop viewports .logo--shop { .unitize-height(160, 16); width: 82% } } } } // Tablet Landscape styling for the global shop header @media screen and (min-width: @tabletLandscapeViewportWidth) { .header-main { .logo-main { width: 30%; } .shop--navigation { width: 70%; } } } // Desktop styling for the global shop header @media screen and (min-width: @desktopViewportWidth) { .header-main { .top-bar { .unitize(margin-bottom, 2); } .logo--shop { width: 75% } } }

2

Es wäre schön, wenn mir hier jemand weiterhelfen könnte :slight_smile: Ich bin ja bestimmt nicht alleine mit dem Problem.

3

stehe vor dem gleichen Problem

4

Du solltest dich erst einmal grundlegen mit CSS beschäftigen.

  1. Hast du dein Logo in der Phone Größe auf 50% Breite stehen.

  2. Hast du die Höhe des Logos auf 160px stehen.

Ergo wird das Logo groß angezeigt. Passt du diese Dinge an auf 100% Breite und 30px Höhe bspw. sieht es wie folgt aus:

BILD