# Verzweiflung mit dem Banner / Bitte um Hilfe

**URL:** https://forum.shopware.com/t/verzweiflung-mit-dem-banner-bitte-um-hilfe/35112
**Category:** Themes & Design
**Created:** [8. März 2016 um 11:25 UTC](https://forum.shopware.com/t/verzweiflung-mit-dem-banner-bitte-um-hilfe/35112 "2016-03-08T11:25:46Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![wienerpresswerk](https://avatars.discourse-cdn.com/v4/letter/w/2acd7d/32.png) [@wienerpresswerk](https://forum.shopware.com/u/wienerpresswerk)
#### Post date: [8. März 2016 um 11:25 UTC](https://forum.shopware.com/t/verzweiflung-mit-dem-banner-bitte-um-hilfe/35112/1 "2016-03-08T11:25:46Z")

</div>

Hallo Leut,

&nbsp;

Nachdem ich nun wirklich alles gelesen habe und den Code untersucht noch und nöcher, komme ich zu keiner Lösung.

1. Der Banner wird immer mit einem Rand dargestellet. Wie bekomme ich den Weg. daß das Element den ganzen Container füllt?

[![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/1X/85c76fb58166cf4de3275b6c73773b974ad2b94e.gif)](http://www.pic-upload.de/view-29968954/banner.png.html)

1. Wie bekomme ich den vergrößerungs Effekt weg? Das Bild wird immer skaliert und pixelig.

&nbsp;

Ich weiß mir wirklich nicht zu helfen und hoffe auf Unterstützung von euch.

Wenn ich das nicht anständig hin bekomme muss Sopware gehen. So kann ich das nicht freigeben.

&nbsp;

---

<div class="post-metadata">

### Author: ![Heiner\_Lohaus](https://avatars.discourse-cdn.com/v4/letter/h/b5a626/32.png) [@Heiner\_Lohaus](https://forum.shopware.com/u/Heiner_Lohaus)
#### Post date: [8. März 2016 um 13:05 UTC](https://forum.shopware.com/t/verzweiflung-mit-dem-banner-bitte-um-hilfe/35112/2 "2016-03-08T13:05:33Z")

</div>

Hi,

welche Styles hast du den auf den Element bzw. was ist das überhaupt für ein Element?

Was steht in der Browser-Toolbar, wenn du Rechtsklick&nbsp;\> Prüfen machst?

Gruß Heiner

---

<div class="post-metadata">

### Author: ![TAB10](https://avatars.discourse-cdn.com/v4/letter/t/c68b51/32.png) [@TAB10](https://forum.shopware.com/u/TAB10)
#### Post date: [8. März 2016 um 17:05 UTC](https://forum.shopware.com/t/verzweiflung-mit-dem-banner-bitte-um-hilfe/35112/3 "2016-03-08T17:05:48Z")

</div>

Ahoi, um den Abstand dort wegzubekommen musst du wahrscheinlich im eigenen Template in widgets/emotion/index.tpl die Variable $basewidth ändern, ggf. noch CSS/LESS Anpassungen.

Die Bild-Sklaierung wegzubekommen ist nicht so mal eben da das Ganze EinkaufsweltGedöhns „absolute“ positioniert ist.

Es gibt zb. Templates von [TAB10](http://store.shopware.com/tabte68482692767/grest-redux.html?c=1033) die eine „floating“ Variante der Einkaufswelten anbieten.

Gruß

---

<div class="post-metadata">

### Author: ![sonic](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sonic/32/25728_2.png) [@sonic](https://forum.shopware.com/u/sonic)
#### Post date: [8. März 2016 um 17:24 UTC](https://forum.shopware.com/t/verzweiflung-mit-dem-banner-bitte-um-hilfe/35112/4 "2016-03-08T17:24:41Z")

</div>

Sind mehrere Baustellen:  
Der Container für die Seite ist max 1260px breit.  
Die Einkaufswelten sind per default 1160px breit. =\> 100px Leerraum - verteilt auf links und rechts.  
Das emotion-widget auf 1260px erweitern wäre eine Möglichkeit, aber dann muss immer noch im Wrap-Container das padding auf 0 gesetzt werden. Auch die ganze interne “Logik” von den Einkaufswelten ist auf 1160 ausgelegt.

Es wäre wohl einfacher, den ganzen wrap-container zu verkleinern und das padding auf 0 setzen. Diese Änderungen ergeben den Screenshot - einfach mal mit den Developertools von Chrome spielen!  
DesktopViewPort

.container von max-width: 78.75rem auf 72.5rem  
.content–main-inner auf padding: 0 0 3.125rem 0  
.content–home margin-top:0&nbsp;

Das wäre in der Form aber dann für alle Seiten.

 ![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/e/ecfc24ff49d839b4da394b954af057c0dfa1c45a.jpeg)

---

<div class="post-metadata">

### Author: ![wienerpresswerk](https://avatars.discourse-cdn.com/v4/letter/w/2acd7d/32.png) [@wienerpresswerk](https://forum.shopware.com/u/wienerpresswerk)
#### Post date: [10. März 2016 um 06:44 UTC](https://forum.shopware.com/t/verzweiflung-mit-dem-banner-bitte-um-hilfe/35112/5 "2016-03-10T06:44:17Z")

</div>

Liebe Leute,

&nbsp;

Ertst mal herzlichen Dank für die Hilfe.

&nbsp;

Hab den Contaiber jetzt sogar auf 65rem runter gesetzt (muss ich noch auf allen&nbsp;Seiten prüfen)

So ist die Gesamtanmutung halbwegs erträglich.

Nervig ist immer noch der weiße Rahmen zwischen Container und Container-main-inner bzw. Einkaufwelt.

das wäre netter vollflächig.

danke, es kann weiter gehen 😉

cheers!

---

<div class="post-metadata">

### Author: ![wienerpresswerk](https://avatars.discourse-cdn.com/v4/letter/w/2acd7d/32.png) [@wienerpresswerk](https://forum.shopware.com/u/wienerpresswerk)
#### Post date: [10. März 2016 um 06:53 UTC](https://forum.shopware.com/t/verzweiflung-mit-dem-banner-bitte-um-hilfe/35112/6 "2016-03-10T06:53:29Z")

</div>

@sonic:

den Abstand content zu container hab ich noch nicht rausgebracht…

---

<div class="post-metadata">

### Author: ![sonic](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sonic/32/25728_2.png) [@sonic](https://forum.shopware.com/u/sonic)
#### Post date: [10. März 2016 um 07:21 UTC](https://forum.shopware.com/t/verzweiflung-mit-dem-banner-bitte-um-hilfe/35112/7 "2016-03-10T07:21:04Z")

</div>

On the Fly im Chrome für Desktop

```
@media screen and (min-width: 78.75em) {
.content-main--inner {
	padding:0;
 }
}

@media screen and (min-width: 78.75em){
.content--home {
	margin-top:0;
 }
}
```

---

<div class="post-metadata">

### Author: ![sloth](https://avatars.discourse-cdn.com/v4/letter/s/d26b3c/32.png) [@sloth](https://forum.shopware.com/u/sloth)
#### Post date: [11. März 2016 um 10:56 UTC](https://forum.shopware.com/t/verzweiflung-mit-dem-banner-bitte-um-hilfe/35112/8 "2016-03-11T10:56:36Z")

</div>

Moin,

ich stehe jetzt etwas auf dem Schlauch.

Könnt ihr mir kurz sagen wo genau was ändern muss?

&nbsp;

---

<div class="post-metadata">

### Author: ![wienerpresswerk](https://avatars.discourse-cdn.com/v4/letter/w/2acd7d/32.png) [@wienerpresswerk](https://forum.shopware.com/u/wienerpresswerk)
#### Post date: [11. März 2016 um 14:02 UTC](https://forum.shopware.com/t/verzweiflung-mit-dem-banner-bitte-um-hilfe/35112/9 "2016-03-11T14:02:03Z")

</div>

> &nbsp;
> 
> He sonic,
> 
> &nbsp;
> 
> danke erstmal. Hat geklappt, zwei Tippfehler waren das Problem. Ich hab den &nbsp;Container per Custom&nbsp;css auf 65rem gesetzt. Soll man da nicht lieber die Klasse im LESS ändern und wenn ja wo? Sozusagen als Template dann?
> 
> &nbsp;
> 
> herzlichen Dank ü[@sonic schrieb:](https://forum.shopware.com/profile/16285/sonic "sonic")
> 
> On the Fly im Chrome für Desktop
> 
> @media screen and (min-width: 78.75em) {  
> .content-main–inner {  
> padding:0;  
> }  
> }
> 
> @media screen and (min-width: 78.75em){  
> .content–home {  
> margin-top:0;  
> }  
> }
> 
> &nbsp;
> 
> &nbsp;

---

<div class="post-metadata">

### Author: ![sloth](https://avatars.discourse-cdn.com/v4/letter/s/d26b3c/32.png) [@sloth](https://forum.shopware.com/u/sloth)
#### Post date: [11. März 2016 um 16:30 UTC](https://forum.shopware.com/t/verzweiflung-mit-dem-banner-bitte-um-hilfe/35112/10 "2016-03-11T16:30:25Z")

</div>

So,

ich habe eine Lösung gefunden.  
Habe die global.less und home.less angepasst und sie per all.less in meine Theme geladen.

home.less

```
/*
Home
==============================================
Defines the styling of the home-page content elements.
*/

.content--home {
    .unitize(margin-top, 0);

    @media screen and (min-width: @tabletViewportWidth) {
        .unitize(margin-top, 0);
    }

    @media screen and (min-width: @desktopViewportWidth) {
        .unitize(margin-top, 0);
    }
}

```

global.less  
&nbsp;

```
@media screen and (min-width: @desktopViewportWidth) {
    .content-main {
        .unitize(margin-top, 20);
        .unitize(margin-bottom, 45);
        .unitize(min-height, 700);
    }
    
    .content-main--inner {
        .unitize-padding(0, 0, 0, 0);
    }
}

```

Hoffe das hilft weiter.

Beste Grüße  
Fabian

---

<div class="post-metadata">

### Author: ![sonic](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sonic/32/25728_2.png) [@sonic](https://forum.shopware.com/u/sonic)
#### Post date: [11. März 2016 um 16:39 UTC](https://forum.shopware.com/t/verzweiflung-mit-dem-banner-bitte-um-hilfe/35112/11 "2016-03-11T16:39:51Z")

</div>

Ihr müsst halt nur gucken, wie sich die Einkaufswelten nun verhalten. Die Basis hat intern eine Breite von 1160px

/Frontend/Bare/widgets/emotion/index.tpl

```
{$baseWidth = 1160}

```

Wenn nun nur die Paddings verkleinert (auf 0) gesetzt werden, wird natürlich dem entsprechend erstmal die Emotion-Box größer - sofern nicht in gleicher Große auch der Container verkleinert wird. Also gucken ob Masonry und resize noch so aussehen, wie sie sollen&nbsp; ![Wearing-Sunglasses](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/1X/301eaa4db0af1251d93dae7904e5b71a4b15e729.png "Wearing-Sunglasses")

---

<div class="post-metadata">

### Author: ![wienerpresswerk](https://avatars.discourse-cdn.com/v4/letter/w/2acd7d/32.png) [@wienerpresswerk](https://forum.shopware.com/u/wienerpresswerk)
#### Post date: [11. März 2016 um 23:16 UTC](https://forum.shopware.com/t/verzweiflung-mit-dem-banner-bitte-um-hilfe/35112/12 "2016-03-11T23:16:35Z")

</div>

Heißt das: wenn ich die base width&nbsp;anpasse wie oben…dann muss ich in alle LESS Dateien rein und adaptieren weil alles schmaler und dann rutscht das hübsch?&nbsp;

Ist es nicht möglich, der seite eine max, basis breite von z.B. 960 zu verpsassen? Gültig für alle unterseiten und categorien etc. Such mich grad wund…

Wenn ich das in der Global less mache hab ich alles links kleben und nix mehr responsiv…

---

<div class="post-metadata">

### Author: ![Markus123](https://avatars.discourse-cdn.com/v4/letter/m/4af34b/32.png) [@Markus123](https://forum.shopware.com/u/Markus123)
#### Post date: [12. März 2016 um 10:06 UTC](https://forum.shopware.com/t/verzweiflung-mit-dem-banner-bitte-um-hilfe/35112/13 "2016-03-12T10:06:11Z")

</div>

Hi,

ich hatte mich auch über den Rand gestört. Ich habe es dann so gelöst:

```
.content-main--inner {
    padding: 0rem 1.5625rem 1.5625rem;
}

.content--home {
    margin-top: 1.5625rem;
}

```

&nbsp;

So bekommt man einen schönen kleinen Rand und es sieht allgemein besser aus mMn.&nbsp;

Interessant ist dass es nur mit Einkaufswelten funktioniert die auf Masonry-Effekt gestellt sind. Wenn die Einkaufswelt auf Resize gestellt ist wird automatisch wieder ein großer Rand links und rechts angezeigt…

---

<div class="post-metadata">

### Author: ![wienerpresswerk](https://avatars.discourse-cdn.com/v4/letter/w/2acd7d/32.png) [@wienerpresswerk](https://forum.shopware.com/u/wienerpresswerk)
#### Post date: [13. März 2016 um 00:02 UTC](https://forum.shopware.com/t/verzweiflung-mit-dem-banner-bitte-um-hilfe/35112/14 "2016-03-13T00:02:30Z")

</div>

Das war die Lösung!!! Perfekt und herzlichen Dank!

&nbsp;

BTW: die gesamtanmutung (container zu breit wie oben gefragt) lässt sich über container.less leicht ändern (in meinem Fall 960px). Man muss dann halt in die blog.less und all die anderen um padding anzupassen, da jetzt alle blöcke am Rand kleben.

&nbsp;

> &nbsp;
> 
> [@sloth schrieb:](https://forum.shopware.com/profile/7525/sloth "sloth")
> 
> So,
> 
> ich habe eine Lösung gefunden.  
> Habe die global.less und home.less angepasst und sie per all.less in meine Theme geladen.
> 
> home.less
> 
> # /\* Home
> 
> Defines the styling of the home-page content elements.  
> \*/
> 
> .content–home {  
> .unitize(margin-top, 0);
> 
> @media screen and (min-width: @tabletViewportWidth) {  
> .unitize(margin-top, 0);  
> }
> 
> @media screen and (min-width: @desktopViewportWidth) {  
> .unitize(margin-top, 0);  
> }  
> }
> 
> global.less  
> &nbsp;
> 
> @media screen and (min-width: @desktopViewportWidth) {  
> .content-main {  
> .unitize(margin-top, 20);  
> .unitize(margin-bottom, 45);  
> .unitize(min-height, 700);  
> }
> 
> .content-main–inner {  
> .unitize-padding(0, 0, 0, 0);  
> }  
> }
> 
> Hoffe das hilft weiter.
> 
> Beste Grüße  
> Fabian
> 
> &nbsp;
> 
> &nbsp;
