# Logo anpassung mittig - Mobile

**URL:** <https://forum.shopware.com/t/logo-anpassung-mittig-mobile/45488>\
**Category:** Themes & Design\
**Created:** [29. April 2017 um 09:33 UTC](https://forum.shopware.com/t/logo-anpassung-mittig-mobile/45488 "2017-04-29T09:33:14Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![RobertGS](https://avatars.discourse-cdn.com/v4/letter/r/46a35a/32.png) [@RobertGS](https://forum.shopware.com/u/RobertGS)\
**Post date:** [29. April 2017 um 09:33 UTC](https://forum.shopware.com/t/logo-anpassung-mittig-mobile/45488/1 "2017-04-29T09:33:14Z")

</div>

Hallo zusammen =)

Ich möchte gern das Logo anpassen, damit es in der Mobile-Version (auch Landscape) mittig angezeigt wird. Derzeit ist es ja nach links ausgerichtet.

Auch soll es etwas größer dargestellt werden als bisher. Um folgende Webseite geht es: [www.steinemann-shop.de](http://www.steinemann-shop.de)

&nbsp;

Der Code in der “header.less” schaut derzeit so aus:

```
.header-main {
background:#571234;
.container {
background:transparent;
.entry--search .main-search--form .main-search--field {
    background: #f5f5f5;
}
}
}

// Smartphone
.header-main {
  .logo-main {
    .logo--link, .logo--shop {
      .unitize-height(45, 16); // Logohöhe = 40px
	  text-align: center;
    }
  }
}

// Smartphone Landscape
@media screen and (min-width: @phoneLandscapeViewportWidth) {
  .header-main {
    .logo-main {
      .logo--link, .logo--shop {
        .unitize-height(65, 16); // Logohöhe = 50px
      }
    }
  }
}

// Tablet
@media screen and (min-width: @tabletViewportWidth) {
  .header-main {
    .logo-main {
      .logo--link, .logo--shop {
        .unitize-height(60, 16); // Logohöhe = 60px
      }
    }
  }
}

// Tablet Landscape
@media screen and (min-width: @tabletLandscapeViewportWidth) {
  .header-main {
    .logo-main {
      .logo--link, .logo--shop {
        .unitize-height(80, 16); // Logohöhe = 80px
      }
    }
  }
}

// Desktop
@media screen and (min-width: @desktopViewportWidth) {
  .header-main {
    .logo-main {
      .logo--link, .logo--shop {
        .unitize-height(80, 16); // Logohöhe = 100px
      }
    }
  }
}

.header-main { .top-bar--navigation .navigation--entry, .header-main .top-bar--navigation .navigation--link {
    color: #f5f5f5;
    cursor: pointer;
}
}

.entry--search .main-search--form .main-search--field {
    background: #f5f4f5;
}

```

Um es mittig zu bekommen, habe ich es schon versucht mit “text-align: center;” bzw. mit dem “punkt” davor “.text-align: center;” , aber gibt keine änderungen.

Ein eigenes Template, mit eigener “all.less” ist vorhanden und auch verlinkt. Bei jeder änderung leere ich den Cache, führe Themes Kompilieren durch und drücke auch STRG+F5.

---

<div class="post-metadata">

**Author:** ![NextMike](https://avatars.discourse-cdn.com/v4/letter/n/838e76/32.png) [@NextMike](https://forum.shopware.com/u/NextMike)\
**Post date:** [1. Mai 2017 um 14:20 UTC](https://forum.shopware.com/t/logo-anpassung-mittig-mobile/45488/2 "2017-05-01T14:20:52Z")

</div>

Beschäftige Dich mit CSS / LESS. 1000 Wege führen nach Rom.

Du könntest bspw. dem folgenden DIV die Klasse block wegnehmen und der Klasse logo–shop margin:auto geben.

---

<div class="post-metadata">

**Author:** ![RobertGS](https://avatars.discourse-cdn.com/v4/letter/r/46a35a/32.png) [@RobertGS](https://forum.shopware.com/u/RobertGS)\
**Post date:** [2. Mai 2017 um 16:04 UTC](https://forum.shopware.com/t/logo-anpassung-mittig-mobile/45488/3 "2017-05-02T16:04:42Z")

</div>

Hey, danke für deine Antwort.

Ich bin dabei mich mehr und mehr mit LESS / CSS zu beschäftigen - aber aller anfang ist schwer.

Ich habe schon einiges hinbekommen, aber bei dem Thema hier komme ich leider nicht so weiter.

&nbsp;

Würdest du mir eventuell bitte den kompletten Code darstellen können?

Also so wie ich es einfügen müsste bzw. welche Datein?

---

<div class="post-metadata">

**Author:** ![NextMike](https://avatars.discourse-cdn.com/v4/letter/n/838e76/32.png) [@NextMike](https://forum.shopware.com/u/NextMike)\
**Post date:** [2. Mai 2017 um 16:36 UTC](https://forum.shopware.com/t/logo-anpassung-mittig-mobile/45488/4 "2017-05-02T16:36:36Z")

</div>

Da wo Du&nbsp;text-align: center; eingesetzt hast, schreibe margin:auto rein.

Die Zeile

```
müstest Du in den .tpl Datein finden und mit 

 

ersetzen.

Ansonsten arbeite Dich hier mal ein: https://developers.shopware.com/designers-guide/
```

---

<div class="post-metadata">

**Author:** ![RobertGS](https://avatars.discourse-cdn.com/v4/letter/r/46a35a/32.png) [@RobertGS](https://forum.shopware.com/u/RobertGS)\
**Post date:** [2. Mai 2017 um 20:14 UTC](https://forum.shopware.com/t/logo-anpassung-mittig-mobile/45488/5 "2017-05-02T20:14:34Z")

</div>

Vielen lieben Dank!

---

<div class="post-metadata">

**Author:** ![eljonagjata](https://avatars.discourse-cdn.com/v4/letter/e/d6d6ee/32.png) [@eljonagjata](https://forum.shopware.com/u/eljonagjata)\
**Post date:** [7. Juni 2018 um 10:39 UTC](https://forum.shopware.com/t/logo-anpassung-mittig-mobile/45488/6 "2018-06-07T10:39:24Z")

</div>

@media screen and (min-width: @desktopViewportWidth) {  
&nbsp; .header-main {  
&nbsp;&nbsp;&nbsp; .logo-main {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .logo–link, .logo–shop {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position: relative;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; float: right;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin-right: 5px;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; z-index: 999;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }  
&nbsp;&nbsp;&nbsp; }  
&nbsp; }  
}

–this change happens only for DesktopView, and other views (tablet, smartphones- are not affected) so it works well for me 🙂