[Gelöst] Hilfe bei den Abständen nach den Produktlisten auf der Startseite / Theme

Hallo,

ich bin bisher immer wieder auf ein "nicht möglich" gestoßen, daher nun hier ein neuer Anlauf.

Auf meiner Startseite, ein eigenes Theme Gambio 4.4.0.4, werden die Abstände nach den Produktlisten, sei es als Slider oder Produkt, immer sehr groß dargestellt, also viel zu viel Luft. Das sieht nicht so schön aus. Ich würde geren die Abstände verringern, bin aber kein Html oder CSS Experte.

Kann mir jemand einen Tipp oder Hilfestellung geben?

Vielen Dank!

 

Dazu muss man den Shop sehen. Eine Beschreibung oder Bild reichen da nicht aus.

 

www.homeandgarden.de

 

Der Abstand nach unten ist eigentlich normal, weil die Kacheln einen Flyover-Effekt haben (beim Drüberfahren mit der Maus wird die Kachel größer) der bei Dir allerdings fehlt.
So sieht man auf der Startseite jedenfalls keine weiteren Bilder der Artikeln

Zum Abstand:
Versuche es mal mit:

Code:

.productlist-swiper {
    margin-bottom: 0px;
}

im eigenen css.
Wenn das nicht hilft:

Code:

.productlist-swiper {
    margin-bottom: 0px; !important
}

Und falls das nicht reicht kannst Du z.B. anstelle der 0px ein -10px versuchen

 

du könntest die Kachel auch ein bisschen verkleinern:
Im StyleEdit (Theme bearbeiten), Produkte, Produktliste, Höhe des Preises der Kachel. Hier kannst du mit den px ein bisschen testen wie es sich verändert.
Aber mit dem CSS von Barbara bist glaube am besten beraten.

 

Vielen Dank schon mal, aber sorry für die blöde Frage, wo füge ich den Code ein?

 

Das kommt ins eigene css im Style Editor.
Klicke auf die drei Punkte neben dem Haus-Symbol, dann erscheint ein Dropdown wo Du das eigene css / scss wählen kannst

 

Hallo zusammen, hallo Barbara,

ich krame mal den alten Thread heraus.

Auf
(Link nur für registrierte Nutzer sichtbar.)
habe ich das gleiche Problem:
Die Kacheln des Produktliste-Swipers auf der Startseite sind zu hoch. Bzw. im oberen Teil der Produktkacheln bleibt zuviel weiss, die würde ich gerne oben abschneiden.

Wenn ich nun Barbaras Code eingebe (mit margin-top: 0px), dann klappt das auf der Startseite.
Aber es ändert sich nun auch sehr unschön das Layout der Produktkacheln auf den Kategorieseiten.

Gibt es ein css, das die Änderung ausschließlich auf der Startseite vornimmt?

Viele Grüße, W.

 

Nur für den Swiper auf deiner Startseite:
z.B.
#textbox-o8mevhn77 .productlist-swiper {
margin-top: -20px;
}

 

Hallo Gerd,
vielen Dank für Deine Hilfe.

Gibt leider dasselbe Ergebnis wie bei Barbaras Code:
Mit !important dahinter klappt es auf der Startseite. Gleichzeitig wird aber das Layout auf der Kategorieseite zerschossen

 

Habe mal auf einer deiner Kategorieseiten eingegeben:
#textbox-o8mevhn77 .productlist-swiper {
margin-top: -20px !important;
}
Da störte der CSS-Code nicht. ??

Also weiter eingrenzen, probiere mal:

#home-center #textbox-o8mevhn77 .productlist-swiper {
margin-top: -20px !important;
}

 

Hallo Gerd,

leider auch nicht, schade.

Diesmal hat der Code gar keine Auswirkungen, weder auf der Start- noch auf der Kategorieseite.

 

War da nicht mal etwas mit "page-index" oder so ähnlich?
Finde den Beitrag leider gerade nicht.

 

Versuche es mal mit:
.page-index .productlist-swiper{
margin-top: -20px;
}
oder:
#home-center .productlist-swiper{
margin-top: -20px;
}

 

Hallo Gerd,
vielen Dank für Deine Geduld!

Da ist irgendwie der Wurm drin.

Beide neuen Varianten haben erstmal gar keinen Effekt.
Wenn ich hinter die -20px; ein !important setze, dann klappt es in beiden Varianten auf der Startseite. Aber gleichzeitig werden wieder auf den Kategorieseiten die großen Bilder stark geschrumpft.

 

Probier mal:
.page-index .product-container {height: 500px}

Wenn sich etwas ändert, mit der Höhe rumspielen bis es passt. Eventuell auch mit "margin-top". Achte auch auf die verschiedenen Breakpoints in der Vorschau. Besonders Mobil. Notfalls eingrenzen.

Stefan

 

Hallo Stefan,

danke für Deinen Vorschlag.
Er geht in die richtige Richtung: Es ändert sich die Höhe des Containers auf der Startseite, während die Kategorieseiten unverändert bleiben.
Aber der Container wird nicht oben, sondern nur unten abgeschnitten - seufz.

Ich habe auch probiert:

.page-index .product-container {margin-top: -20px;}

Ergebnis: Container ändert sich gar nicht.

Leider bin ich kein Profi in css, ganz im Gegenteil, kann also selbst wenig Ideen dazu beisteuern

VG,
Wellisa

 

wenn ich bei "Untersuchen" das padding bei productlist auf 0 ändere, ist der Abstand kleiner.


.productlist {
padding: 0 0 30px
}
ändern auf:
.productlist {
padding: 0 0 0px
}

 

.productlist beim Untersuchen finde ich nur auf der Kategorieseite, nicht auf der Startseite.

Vielen Dank für Eure Hilfsangebote, aber das geht mir leider zu tief in´s Programmieren, was sonst nicht meine Baustelle ist.
Vielleicht lasse ich es erstmal wie es ist...

 

also das ist von deiner Startseite:


und so sieht es aus mit der Änderung:



Du kannst das testen indem auf im SE auf eigenes CSS gehst und dort diesen Code eingibst:

.productlist {
padding: 0 0 0px
}

Wie weit sich das auch auf anderen Seiten auswirkt, wirst du ja dann sehen.