Optical bug by WooCommerce

I'm using Theme Spacious by ThemeGrill (https://themegrill.com/). If I use the plugin "WP Adverts - WooCommerce Payments" by Greg Winiarski, there are various optical errors in the area 'checkout' and 'cart'.

See my attachments!

Greetings from Martin

 

Hallo maxe

Dies ist die betroffene Webseite. https://test.pigeonmagnetometer.com/kasse/. Gib einfach einmal einen falschen Gutscheincode ein, dann siehst du das Problem.

Danke
Martin

 

Nein, der Code ".woocommerce-error {padding: 1em 2em 1em 3.5em;}" löst das Problem leider auch nicht. Code eingegeben unter: Design - Customizer - Zusätzliches CSS.

LG Martin

Welches Beispiel?

LG Martin

 

Okay, ich habe deinen vorgeschlagenen CSS-Code wieder drin und noch zusätzlich den Cache geleert. Leider sehe ich keine Änderung.

 

Ohhhh, guter Mann. SEHR GUTER MANN. Dieser CSS-Code funktioniert. Ist es fachlich richtig, wenn ich es so verwende:

.entry-content ul.woocommerce-error {padding: 1em 2em 1em 3.5em !important; }

Also mit (!important), damit ein späteres Update meines Themes oder von Woocommerce dieses CSS nicht wieder überschreiben kann?

Danke,
Martin

 

Hallo maxe

Okay, verstehe. Ich lass es mal drin, so nach dem Motto sicher ist sicher.

Vielen Dank!

***********************************************
Ich habe da noch so ein lästiges optisches Problem bei WooCommerce. Wenn ich eine Bestellung bei WooCommerce durchführe (z.B. Scheckzahlung) erhalte ich eine Bestätigung über die Kassen-Seite (Vielen Dank, deine Bestellung ist eingegangen).

Dann kommt in der nächsten Zeile BESTELLNUMMER: / DATUM: / E-MAIL: / GESAMT: mit den entsprechenden Werten.

Je nachdem welche E-Mailadresse ich eingebe (Länge der E-Mail-Adresse) oder welcher Gesamtbetrag ausgewiesen wird, verschiebt es die „ZAHLUNGSMETHODE:“ eine Zeile nach unten. Leider hat diese 2. Zeile keinen Abstand zur 1. Zeile und pickt ganz oben.

Schön wäre hier der gleiche Abstand wie zwischen „Vielen Dank, deine Bestellung ist eingegangen“ und „BESTELLNUMMER:“, oder etwas mehr. Meines Erachtens fehlt genau eine Leerzeile.

Ich habe das Problem im ersten Bild oben (Here should be a blank line - 5mm) beschrieben.

Kann man das Problem auch mit einem CSS-code beheben?


LG Martin

 

Sorry, ich sehe Woocommerce hat schon dicht gemacht. Ich habe für dich einen Benutzer Account angelegt.

Benutzer: maxe
Passwort: maxe2019@

Bei der Bestellung bitte Scheckzahlung anhaken. Als Emailadresse bei der Bestellung funktioniert auch 123@123.com.

Danke,
Martin

 

Hallo maxe

Funktioniert dieser Benutzeraccount?

LG Martin

 

Hallo maxe

Ich habe jetzt...

.woocommerce ul.order_details li
{ margin-bottom: 35px
! Important;
}
.. eingegeben. da schein zu funktionieren.

Ist das von deiner Seite aus gesehen (technisch) so okay?

LG Martin

 

Hallo maxe

Super, danke!

Jetzt habe ich noch genau 1 Problem. Wenn du das schaffst, machst du mir ein richtiges Ostergeschenk. Ich habe hier schon einiges versucht, aber es hat leider nicht funktioniert. Auch die Plug-In Lieferanten bekommen es leider nicht hin.

Ich habe 4 Seiten bei denen sehr wenig Text drin ist. Nun habe ich das Problem das der Footer so natürlich in der Luft hängt und nicht unten am Bildschirmrand aufliegt (siehe An- / Abmelden).

Da ich über dem Footer einen „zweiten Footer“ habe wo meine Werbebanner drin sind, hätte ich gerne, dass bei einer kurzen Webseitenhöhe (Seite mit wenig Text) der Footer (schmale Leiste mit Impressum, AGB, DSGVO, FAQ, Kontakt…) am unteren Rande des Bildschirmes aufsetzt. Dies bei jedem Bildschirm, egal wie groß dieser ist. Oder anders gesagt, wenn eine Seite nicht die gesamte Höhe erreicht (wenig Text) sollte sich die Seite automatisch an die Höhe des Bildschirmes anpassen, und dies bei allen Bildschirmgrößen. Ich möchte dies deshalb, weil ich den „zweiten Footer“ kommerziell nutzen möchte (Werbebanner).

Derzeit löse ich das Problem so, dass ich für die entsprechenden Seiten eine Mindesthöhe eingebe.

Beispiel:

.page-id-932 #primary {
min-height: 625px !important;
}

Als zusätzliche Sicherheit mache den Hintergrund in der gleichen Farbe (grau), falls ein Bildschirm eines Users größer ist und so der Footer zu hoch steht. Das ist eine Notlösung, jedoch nicht dies was ich möchte.

Ich habe jetzt einmal den Hintergrund auf weiß gestellt und die Mindesthöhe für die Seite „An- / Abmelden“ entfernt damit du das Problem optisch sehen kannst.

Vermutlich gibt es da 2 Ansätze:

Entweder merkt die entsprechende Seite, dass sie zu wenig Text hat und schiebt den Footer nach unten an den Bildschirmrand, oder der Footer selbst positioniert sich bei jedem Bildschirm an die richtige Position.

Was ich nicht möchte ist ein fixierter Footer (fixed) der am unteren Bildschirmrand stehen bleibt. Das habe ich schon getestet. Es sieht nicht gut aus und kostet zu viel Platz auf den Seiten wo ich genug Text habe.


Kannst du mir hier helfen?

LG Martin

 

Hallo maxe

Okay, werde ich mal versuchen. Was genau meinst du mit "nicht mit main, sondern mit deiner ID/Class." Bitte gib mir hier mal ein Beispiel.

LG Martin