Um schreiben oder kommentieren zu können, benötigen Sie ein Benutzerkonto.
Sie haben schon ein Benutzerkonto? Melden Sie sich hier an.
Jetzt anmeldenHier können Sie ein neues Benutzerkonto erstellen.
Neues Benutzerkonto erstellen
Guten Tag,
ich habe ein kleines Problem ich habe jetzt schon mehrere CSS Codes probiert und ich komme einfach nicht weiter. Ich würde nämlich gerne die Produktbildgröße (nicht auf der Shop Seite sondern auf der Artikelseite) von der Breite und Höhe her anpassen wollen. Wie kann ich das tun?
Webseite: https://nordisch-by-nature.berlin/
Theme: Envo Shop
Mfg
Hallo!
Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.
Themes für WooCommerce haben im Regelfall eine Einstellung unter Design -> Customizer -> WooCommerce -> Produktbilder umd die Größe anzupassen. Nach einer Änderung müssen alle Bilder neu berechnet werden!
Gibt es diese Einstellung nicht, gilt es herauszufinden ob das Theme überhaupt Bildgrößen für WooCommerce definiert um diese zu ändern. Gibt es keine Definition, müssen eigene erstellt werden. In beiden Fällen hilft die WooCommerce Developer Dokumentation.
Also diese Einstellung gibt es tatsächlich, aber wenn ich was ändere, passiert Garnichts. Ich habe auch alle Bilder neu generiert. Wie verfahre ich also weiter um meine Änderung noch hinzubekommen?
Mfg und danke ´
Zahni
Das sind die CSS Regeln, die für die Teilung der Produktansicht zuständig sind:
Bild links
.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
float: left;
width: 48%;
}Summary rechts
.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
float: right;
width: 48%;
clear: none;
}Du müsstest an beiden Prozentwerten 'schrauben'.
Also teilweise funktioniert es. Rechts der Text funktioniert, aber links keine Veränderung bei ändern der Werte auch nicht nach dem wenn ich alle Bilder neu generiere.
Mfg und danke
Also wenn ich die erste Regel auf 30% ändere sehe ich das Bild kleiner werden. Entweder Du machst was falsch oder Du hast andere CSS Regeln eingebaut, die eine Änderung verhindern.
Also ich denke erst, das letzteres stimmt. Ich poste hier Mal einen Screenshot mit meinen bestehenden CSS Codes.
Bin leider gerade aber nur am Handy.
[Blockierte Grafik: https://ibb.co/Qc4SLQQ]
Mfg
Hab jetzt erst gesehen hat ja garnicht geklappt. Also jetzt hier was ich in den zusätzlichen CSS drinne hab.
[PLAIN]
/*Produktsuche ausblenden*/
.header-search-form {
display: none;
}
/*Produkt-Sortierung ausblenden*/
.woocommerce .woocommerce-ordering {
display: none;
}
/*Trennlinie Header ausschalten*/
#site-navigation {
border-bottom: none;
}
/*Ergebnisse ausblenden*/
.woocommerce-result-count
{
display: none;
}
/*Seitennavigation ausblenden*/
""#site-navigation""
""{
display: none;
}""
.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
float: left;
width: 10%;
}
.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
float: right;
width: 48%;
clear: none;
}
[/PLAIN]
Da sind offensichtlich wieder Codefehler drinnen!!
Alle Anführungszeichen müssen weg!!! (4x Doppelanführungszeichen)
Vielen Dank daran hats gelegen.
Woher hats du den schadhaften Codeteil??
Am 3.4. war auch in einem kopierten CSS-Code ein ominöser Fehler.:eek::oops::confused:
Ich finde das es am PC perfekt ist, allerdings am Handy zu klein kann ich unterschiede zwischen den Handy und PC Versionen machen.
Woher hats du den schadhaften Codeteil??
Am 3.4. war auch in einem kopierten CSS-Code ein ominöser Fehler.:eek::oops::confused:
Wurde hier gepostet.
Aber sicher OHNE der Anführungszeichen!!!
Ja da hast du Recht, hab gerade nachgeguckt keine Ahnung wie die dahin gekommen sind ;)?
Hast du denn noch eine Lösung bezogen auf meine andere Anfrage?
"Ich finde das es am PC perfekt ist, allerdings am Handy zu klein kann ich unterschiede zwischen den Handy und PC Versionen machen."
allerdings am Handy zu klein kann ich unterschiede zwischen den Handy und PC Versionen machen.
Das wird dann mit Media Queries gemacht!
Das könnt dann vielleicht so aussehen .....
@media only screen and (min-width:768px) {
.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
float: left;
width: 25%;
}
.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
float: right;
width: 70%;
clear: none;
}
}
@media only screen and (max-width:767px) and (min-width:500px) {
.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
float: left;
width: 45%;
}
.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
float: right;
width: 50%;
clear: none;
}
}Auf irgend welche zusätzliche Zeichen achten ;-)
Vielen Dank funktioniert wunderbar.
Mfg
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!