gelöst Abstände im der Produktkachel

Hallo, ich versuche verzweifelt die Abstände zwischen Produktbild - Preis - Lieferzeit zu ändern. Mit den Mitteln des StyleEditors ist mir das nicht gelungen. Siehe Screenshots. Hat jemand einen Tipp für mich?

Grüße
André

 

Rechte taste "untersuchen" und da das CSS bestimmen was für den Bereich greift - Das dann im SE unter eigenes CSS ablegen um das Shopeigene damit zu überschreiben.
Mit Link zum Shop können wir dir auch den Schnipsel fertig machen.

 

bitte daran denken, dass da auch Platz für Sonderangebote, Grundpreise und Bewertungs-Sterne vorhanden sein muss, falls man das nutzt.
Sonst hast Du bei einem Angebot den Preis im Artikelbild darunter.

 

Es scheint wohl so das es Platzhalter für andere Funktionen wie die Sterne sind. Mit einem CSS a la
element.style {

1. padding-top: 0px;
2. padding-bottom: 100px;
3. margin-top: 0px;
4. margin-bottom: 100px;

funktioniert es nicht. Habe es versucht über die Browser Elements (Untersuchen) probiert, aber ohne Erfolg. Will auch nicht unbedingt den Platzhalter rausschmeißen. Könnte ja sein dass ich in doch noch benötige.

 

Wie mache ich das? Möchte meine Kachel auch kleiner machen, ähnlich wie bei little monster (keine Ahnung ob ich hier einfach so Links anderer Gambio-Shops posten darf?)

 

Ja kannst Links posten, solange es nicht SPam / Werbung ist = alles gut.
In Chrome ist es rechte Taste und im Kontext Menü dann unten das "untersuchen" wählen.
Dann siehst das html und css das da greift.
Das musst dann am css testen bis es passt. - Oder dir von einem Designer für html Seiten helfen lassen.
Und beachten dabei das da auch Freiraum ist für z.b. längere Artikelnamen, Angebotspreise, Bewertungssternchen
Also nicht alles was weiß ist ist auch unbenutzt

 

Ich bin mir jetzt nciht sicher, aber ich meine man kann die Kachelhöe im Style Editor anpassen.
Weiß aber nicht, ob man dann das css trotzdem noch ändern muss, weil der Text dann vielleicht unter der Kachel steht.

 

Ja Barbara, das stimmt. Ich habe die Kachelhöhe im SE verkleinert. Allerdings bleiben Schrift, Sterne und Preise am ursprünglichen Platz. Sieht bunt durcheinander gewürfelt aus. Geht wohl nicht ohne CSS.

 

Ich als CSS-Laie hab mich jetzt mal daran versucht. Es hat auch geklappt, allerdings nur für das Flyover. Könnte mir jemand sagen, welchen Teil des Codes ich rausnehmen oder ändern müsste, damit es für die normale Kachelansicht greift? (Den CSS-Code für die normale Kachelansicht bekomme ich mit "Untersuchen" nicht zu greifen.

Code:

html body.page-index-type-gm_boosted_category.page-index-type-cat.page-index-type-cPath.filterbox-enabled div#outer-wrapper div#wrapper div.row div#main div.main-inside div.container-fluid div.row.product-filter-target.productlist.productlist-viewmode.productlist-viewmode-grid div.product-container.has-gallery form.no-sta.productlist-viewmode-grid .product-container .title, .productlist-swiper .product-container .title, .product-container.flyover .title {
    display: block;
    padding-top: 15px;
    height: 51px;
}

oder lieg ich total falsch?

 

Versuche es mal damit:

Code:

html body.page-index-type-gm_boosted_category.page-index-type-cat.page-index-type-cPath.filterbox-enabled div#outer-wrapper div#wrapper div.row div#main div.main-inside div.container-fluid div.row.product-filter-target.productlist.productlist-viewmode.productlist-viewmode-grid div.product-container.has-gallery form.no-sta.productlist-viewmode-grid .product-container .title, .productlist-swiper .product-container .title{
    display: block;
    padding-top: 15px;
    height: 51px;
}

oder du schaltest Flyover vorübergehend ab zum bearbeiten der Kacheln(danach wieder löschen)

Code:

/* product-hover-js ausgeschaltet */
.product-container.flyover{
    visibility: hidden;}

 

Super! Vielen Dank Gerd! Jetzt hat es geklappt! (nach Abschalten des Flyover!)